View Full Version : Width Problems & Float Question

01-16-2010, 12:01 AM
How come when I size two adjacently floated divs 20/80% I get an overlap problem?

Is it the border?

Next: If I do this:

<div id="container">
| <div id="floated_div_1">
| |Stuff...
| </div>
| <div id="floated_div_2">
| |Stuff...
| </div>

Then the question is, can we say those nested, floated divs are actually still inside the #container or do we have to say they are floated out of it?

In other words - when something is floated, is it still considered to still be inside it's non-floated container or not?

Dr. V

01-16-2010, 12:25 AM
with the correct box model (as opposed to early IE's broken box model) the borders/margins are added to the dimensions of the box. So width:10px; + border:10px; + margin:10px = 50px (left and right borders and margins have added 40 to our original width of 10). So if you have any borders at all on your 20/80% boxes then yes that would explain the overlap problem.

In quirks/compatibility mode IE6/7/8 still implement the old </=IE5 broken box model. I guess the old broken box model was set up so that the borders/margins were subtracted from the boxes dimensions. So width:50px; - margin:10px - border:10px; would actually cause you actual boxes content area to be 10 px even though you specified a width of 50px. You can see how this method is a little more counter intuitive. It was also against the HTML specs and thus made crossbrowser websites much more difficult.

The floated elements are inside the container.

01-16-2010, 12:29 AM
Hi Linehand - thank you very much!

Kind regards

Dr. V