CSS Container DIv Height. Floating DIV questions?

Under last floating element (still within the #parent div).

Under last floating element (still within the #parent div): Clear means that it clears the float.

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.

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. 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.

I use the clearfix class... . Clearfix:after { content: ". "; display: block; height: 0; clear: both; visibility: hidden; } .

Clearfix {display: inline-block;} /* des 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.

Container { width:200px; } . Floated { width:100px; float:left; } . Clear { clear:both; } A B.

This isn't a clear/layout issue, his problem is that the floats aren't appearing side by side. – kmiyashiro Aug 18 '09 at 19:05.

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.

Actually no, he wants to float the first div to the right and the second div to the left, so first-child is correct. – kmiyashiro Aug 18 '09 at 18:55 of course it won't work in IE... – kmiyashiro Aug 18 '09 at 19:04 Ah yes I see that now, thanks. – Eric Wendelin Aug 18 '09 at 21:50.

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; } A B.

This is not a clearing/layout issue, it's a float issue. – kmiyashiro Aug 18 '09 at 19:04.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.