DIV Height Strangeness

Hello Experts -
Please consider the following HTML/CSS:
<div style="border:1px solid red; padding:0; vertical-align:top;">
    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
</div>

Open in new window

When rendered, the container DIV displays as having no height even though it contains three other left-floated DIVs each of which has a specified height of 25px.  Why doesn't the container DIV expand to 'surround' the 3 DIVs inside it?  Thanks!

-- Rick
MinnRickAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Try this with <br clear="all">.
<div style="border:1px solid red; padding:0; vertical-align:top;">
    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
    <br clear="all">
</div>

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Since all your divs are floated, there's nothing to give it height.

Try adding

height: auto; overflow: visible;

Open in new window

to the outer div.

If that  doesn't work, add a fourth div with height: 0; width: 0; clear: both;
0
 
twohawksConnect With a Mentor Commented:
Its a matter of understanding flow.

Most modern browsers will handle properly by assigning position fixed to the container
	<div style="position:fixed; border:1px solid red; padding:0; vertical-align:top; zoom:1;">
	    <div style="display:inline-block; border:1px solid green; height:25px; width:50px; float:left;"></div>
	    <div style="display:inline-block; border:1px solid green; height:25px; width:50px; float:left;"></div>
	    <div style="display:inline-block; border:1px solid green; height:25px; width:50px; float:left;"></div>
	</div>

Open in new window


But then, usually you will not want to use fixed -for obvious reasons -(see references below)

As well, if you are coding for IE6 which does not understand position:fixed; however, then you must use a different tact anyway.

<div style="position:relative;">
	<div style="position:absolute; border:1px solid red; padding:0; vertical-align:top; zoom:1;">
	    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
	    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
	    <div style="border:1px solid green; height:25px; width:50px; float:left;"></div>
	</div>
</div>

Open in new window


I believe this second method would be the common one.  It does not require pre-establishing height. It establishes the host container as a reltaive reference so it will flow with its contents (so to speak).

That said, xm's comment above shouldn't go discounted... most often you will run into trouble because a parent element has not yet established a baseline 'weight' for height or width, and you will code till the cows come home and never hit your mark trying to bend a child container to your will.


I recommend studying about "flow" -- it is one of the most misunderstood aspects in coding css for beginners.

Here are perhaps some helpful resources for getting started in this regard:
http://www.w3schools.com/css/css_positioning.asp
http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/
http://www.vanseodesign.com/css/understanding-css-floats/
http://www.vanseodesign.com/css/css-positioning/

HTH
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
twohawksCommented:
I meant to include that setting height to auto does not establish a base height (that's a bit misleading), it only has an illusion of working for the height value in IE (but the width is not controllable in that case), and will not work in most non-ie browsers.
Not to criticise you, xm, I just didn't want the post reference to be misleading.
0
 
MinnRickAuthor Commented:
Thank you all.  What is baffling to me in all of this is that the outer/container DIV doesn't recognize the height of the DIVs inside it and (quite logically) expand to accommodate that height.  Is this a flaw in CSS or is there some method to it functioning like this?  At this point it doesn't make any sense to me that it'd work that way.
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
That is the way it works though it's an HTML problem, not CSS.  <div> with no content of it's own has no height.  Putting even a space in it will show a difference.  Other <div>s do not count as content.  
0
 
MinnRickAuthor Commented:
Thanks very much all.
0
 
twohawksCommented:
Thanks you, Minn ;^)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.