[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

DIV Height Strangeness

Posted on 2011-10-24
8
Medium Priority
?
187 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:MinnRick
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37021272
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
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1600 total points
ID: 37021335
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
 
LVL 8

Assisted Solution

by:twohawks
twohawks earned 400 total points
ID: 37021342
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:twohawks
ID: 37021382
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
 

Author Comment

by:MinnRick
ID: 37021441
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
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1600 total points
ID: 37021456
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
 

Author Closing Comment

by:MinnRick
ID: 37021535
Thanks very much all.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 37021661
Thanks you, Minn ;^)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question