Greetings to all! I can see I'm not understanding the box model
correctly considering this basic example:

#green {
background-color: green;
width: 100px;
height: 100px;
float: left;         }
#red {
background-color: red;
width: 100px;
height: 100px;         }
<div id="green">Green</div>
<div id="red">Red</div>

I can understand that the "green" floated div is blocking the "red"
div, and therefore we don't see any red. Well, I can frankly sort of
understand it, because it's floated after all, but what puzzles me the
most by far here is the fact that they are the same size and yet we
can see the word "Red" below the green square. Wouldn't it make more
sense for the word "Red" not to be visible at all, considering it
comfortably fits its hidden box? I'm sure the specs dictate this
behavior, but I'm looking for some rationale, specially given that
overlaps and hidden stuff are quite common in CSS, if not the desired

Thanks in advance.


css-discuss []
List wiki/FAQ --
List policies --
Supported by --

Reply via email to