XHTML Question: Best way to make div height 100%?

1901gt · 08-26-2008, 08:27 PM

Let say, I have this example.

Code:

<div id="container">

<div class="contentA left">Lorem lipsum</div>
<div class="contentB right">Lorem lipsum</div>

</div>

.. where left and right is float left and right respectively.

What is the best method (must be validated) to make the container's height 100% or fluid without declaring a fixed height value?

I seems to have some problem with this whenever there is floats inside the div.

Before, I used to use this:

Code:

#container {
overflow: auto;
height: 100%;
min-height: 100%;
}

But sometimes, the horizontal and vertical scrollbars will appear inside the div, especially in IE7.

Epic · 08-26-2008, 08:31 PM

Clear the floats. This isn't necessarily the best way to do it, but it works.

Code:

<div id="container">

<div class="contentA left">Lorem lipsum</div>
<div class="contentB right">Lorem lipsum</div>

<div style="clear: both;"> </div>
</div>

1901gt · 08-26-2008, 09:52 PM

Ok great! Works well for me.

1901gt · 09-10-2008, 12:24 AM

I think I've found a better way. Silly me.
Just insert the following inside the div and it will auto expand.

Code:

#container {
overflow: hidden;
}

Phaethon · 09-11-2008, 03:17 PM

That should work, but if I remember correctly that could cause some of the content in the container to get cut off.

08-26-2008, 08:27 PM	#1 (permalink)
1901gt vinedomains.com Join Date: Mar 2005 Location: singapore Posts: 1,735 99.95 NP$ (Donate)	XHTML Question: Best way to make div height 100%? Let say, I have this example. Code: <div id="container"> <div class="contentA left">Lorem lipsum</div> <div class="contentB right">Lorem lipsum</div> </div> .. where left and right is float left and right respectively. What is the best method (must be validated) to make the container's height 100% or fluid without declaring a fixed height value? I seems to have some problem with this whenever there is floats inside the div. Before, I used to use this: Code: #container { overflow: auto; height: 100%; min-height: 100%; } But sometimes, the horizontal and vertical scrollbars will appear inside the div, especially in IE7. __________________ Domains For Sale: HUMOO.com \| CAFOO.com \| VAJOO.com \| PEPOO.com \| MOCAU.com \| JASLI.com \| LUVVO.com \| DINOMO.com \| MajorBlogs.com \| LatestMovies.net

08-26-2008, 08:31 PM	#2 (permalink)
Epic Senior Member Join Date: Sep 2005 Posts: 3,782 518.09 NP$ (Donate)	Clear the floats. This isn't necessarily the best way to do it, but it works. Code: <div id="container"> <div class="contentA left">Lorem lipsum</div> <div class="contentB right">Lorem lipsum</div> <div style="clear: both;"> </div> </div>

08-26-2008, 09:52 PM	#3 (permalink)
1901gt vinedomains.com Join Date: Mar 2005 Location: singapore Posts: 1,735 99.95 NP$ (Donate)	Ok great! Works well for me. __________________ Domains For Sale: HUMOO.com \| CAFOO.com \| VAJOO.com \| PEPOO.com \| MOCAU.com \| JASLI.com \| LUVVO.com \| DINOMO.com \| MajorBlogs.com \| LatestMovies.net

09-10-2008, 12:24 AM	#4 (permalink)
1901gt vinedomains.com Join Date: Mar 2005 Location: singapore Posts: 1,735 99.95 NP$ (Donate)	I think I've found a better way. Silly me. Just insert the following inside the div and it will auto expand. Code: #container { overflow: hidden; } __________________ Domains For Sale: HUMOO.com \| CAFOO.com \| VAJOO.com \| PEPOO.com \| MOCAU.com \| JASLI.com \| LUVVO.com \| DINOMO.com \| MajorBlogs.com \| LatestMovies.net

09-11-2008, 03:17 PM	#5 (permalink)
Phaethon Carpe Diem Join Date: Apr 2007 Location: United States - OHIO Posts: 612 226.00 NP$ (Donate)	That should work, but if I remember correctly that could cause some of the content in the container to get cut off. __________________ :love: NamePros :love:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)