CSS Container DIv Height. Floating DIV questions.

Question

Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?

content

div#parent {

background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;

}

div#parent div { width:49%; float:right;
padding:3px;
}

div#parent div:first-child { float:left; }

Thanks, ~ck

Answer 1

under last floating element (still within the #parent div):

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

Clear means that it clears the float.

Answer 2

#container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>

Answer 3

I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:

#container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

 

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>

Answer 4

By the way, you want

div#parent > div { float:left; }

instead of

div#parent div:first-child { float:left; }

which is still not IE6 friendly, but it will float both child DIVs.

Answer 5

I use the clearfix class...

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {display: inline-block;}

/* Hides from IE-mac */ /** html .clearfix {height: 1%;}/ .clearfix {display: block;} / End hide from IE-mac */

then just use the class in every floated-element container.

Answer 6

This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.

First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).

Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.

First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.

Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.

1. You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
2. The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.