Friday, 15 April 2011

css - Expand parent div height to childs -



css - Expand parent div height to childs -

i have problem footer positioning. doesn't go bottom/last.

so, have container div has 3 divs - float:right , float:left , center 1 (which has position:absolute) comes between two floated divs.

the center 1 must have fixed width , height because it's image.

in center div have div lot of content.

the problem is, because center div has fixed width , height, doesn't take childs div height.

so problem how set footer comes lastly (after container)?

note - jquery set width of floated divs because take 100%-980px width.

this how looks like.

i tried putting center div overflow:auto,overflow:overlay,margin-left:auto;margin-right:auto;.

after reading question 1 time again again come conclusion , create below fiddle using code , embed sample image desired size.

please allow me know if wrong while understanding question. can work around according needs.

fiddle: http://jsfiddle.net/ah3nr/6

demo: http://jsfiddle.net/ah3nr/6/embedded/result/

my approach:

i have remove position:absolute center div , added new div image , relate them both using css layer techniques.

updated css:

.sectiondowncontainer { width: 980px; /*height:270px;*/ border:1px solid red; /*position: absolute;*/ position:relative; top: -32px; z-index: 1; } /*.sectiondownmenu { margin-left: 50px; margin-top: 1px; display: block; } */ #image_container { position:relative; width:980px; height: 270px; margin-top:-2px; z-index:2; } .sectiondowncontent { width: 640px; margin-top: -190px; margin-left: 50px; position: relative; z-index:5; color:#000; font-weight:bold; }

screenshot:

css

No comments:

Post a Comment