html - Wrapper re-size -
i have wrapper surrounding header content inside container content inside. wrapper on there keep positioned each other accordingly within confines set, center everything. have container automatically re-size according content goes inside of it, works without issue. however, wrapper around header , container won't follow same rule , ends taking height of 1px seems. please note: code below show wrapper outlined dashed white border @ top, should instead wrap around contains.
here's code website on jsfiddle.
any appreciated. feel though closed of floats, don't see why height: auto; on wrapper won't work, maybe there's i'm missing.
height: auto
on #wrapper
isn't working because virtually every element inside has position: absolute
.
what position: absolute
do? http://www.w3.org/tr/css21/visuren.html#absolute-positioning
in absolute positioning model, box explicitly offset respect containing block. it removed normal flow entirely (it has no impact on later siblings). absolutely positioned box establishes new containing block normal flow children , absolutely (but not fixed) positioned descendants. however, contents of absolutely positioned element not flow around other boxes.
the choices fix problem:
- give
#wrapper
explicitheight
- won't work if don't knowheight
beforehand. - as @jeroen said: use javascript set
height
of#wrapper
. - what should really redo css:
position: absolute
is not how should position every element on page. should usefloat
s instead.
for comparison of using position: absolute
vs float
s, see:
Comments
Post a Comment