...

View Full Version : hot make div box fluid according to content



o0O0o.o0O0o
05-14-2009, 08:16 AM
i have the following design


<div Wrapper>

<div header></div>


<div content>


<div left></div>
<div rightContent>
<div main content></div>
<div bottom advertisement></div>

</div>

</div>

</div>



I want that if my content in mainContent expands then wrapper , content shouldalso expand according to it

Rowsdower!
05-14-2009, 02:23 PM
i have the following design


<div Wrapper>

<div header></div>


<div content>


<div left></div>
<div rightContent>
<div main content></div>
<div bottom advertisement></div>

</div>

</div>

</div>



I want that if my content in mainContent expands then wrapper , content shouldalso expand according to it

Ok, but what is the actual code you are using now (including CSS)? As long as you don't specify a set height for the wrapper or container then this should expand automatically. If you have floated items that aren't expanding the container then you can add overflow: auto; to the container (wrapper should then expand to meet the needs of the container automatically so no need to add it again there). I suspect this is related to your problem given that you have a div left and div right in there, but I can only guess right now.

Really, we'd need to see your full source code to tell why this isn't happening to begin with so we can tell you how to fix it. This could be related to a number of factors...

Excavator
05-14-2009, 04:13 PM
Your code is invalid! Check the validator to see the errors it finds - see links in my sig below.


You need to specify if <div wrapper> is an id or a class.
Your <div main content> could be multiple id's or classes since neither is allowed a space.

Rowsdower! is right, your container will automatically expand to enclose any content you put in it as long as you have your width's right and clear your floats.
Check the box model (http://www.w3.org/TR/CSS2/box.html)to see how to determine widths.
Have a look at http://www.quirksmode.org/css/clearing.html to see about clearing floats so your container will enclose them as well.

o0O0o.o0O0o
05-15-2009, 02:38 AM
Acually code is valid , i have just put the text as description , its not the actual code.

But that overflow:auto did the trick

thanks for that

VIPStephan
05-15-2009, 02:45 AM
And please also read up on why this works:

Containing Floats (http://complexspiral.com/publications/containing-floats/)
Block formatting context (http://www.codingforums.com/showthread.php?t=155500) (read my reply further down)

o0O0o.o0O0o
05-15-2009, 03:42 AM
OMG! all that stuff about floats is great. I never knew about that . thats why i were having so many problems with that . Now i really learning some css



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum