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

1901gt · 08-26-2008, 09: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.
????: NamePros.com http://www.namepros.com/programming/507968-xhtml-question-best-way-make-div.html

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, 09: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, 10:52 PM

Ok great! Works well for me.

1901gt · 09-10-2008, 01: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;
}

Nathan · 09-11-2008, 04: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, 09:27 PM	THREAD STARTER #1 (permalink)
1901gt Senior Member Join Date: Mar 2005 Location: Singapore Posts: 1,836 Follow @mdnoorhadi	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. ????: NamePros.com http://www.namepros.com/programming/507968-xhtml-question-best-way-make-div.html 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.

08-26-2008, 09:31 PM	#2 (permalink)
Epic Senior Member Join Date: Sep 2005 Posts: 3,779	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>

09-10-2008, 01:24 AM	THREAD STARTER #4 (permalink)
1901gt Senior Member Join Date: Mar 2005 Location: Singapore Posts: 1,836 Follow @mdnoorhadi	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; }

09-11-2008, 04:17 PM	#5 (permalink)
Nathan Carpe Diem Join Date: Apr 2007 Location: Brisbane Posts: 908 Follow @nathandevlin	That should work, but if I remember correctly that could cause some of the content in the container to get cut off. __________________ TheRedZone.TV ■ WhoisLand.com ■ CheckPageRank.zee.co

08-26-2008, 10:52 PM	THREAD STARTER #3 (permalink)
1901gt Senior Member Join Date: Mar 2005 Location: Singapore Posts: 1,836 Follow @mdnoorhadi	Ok great! Works well for me.

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