You can avoid all the problems of box model by using box-sizing.  I suggest 
read this Mozilla (MDN) article:


After using this, I don't have to worry about something not fitting in a DIV.  
This is what original Microsoft IE6, IE7 and IE8 used to do (i.e they 
misinterpreted box model) but people said it is wrong so now we have 
box-sizing.  Microsoft won here as far as I am concerned.

On Mon, 7/8/17, Ezequiel Garzón <> wrote:

 Subject: [css-d] Basic questions about the box model
 To: "css-discuss" <>
 Date: Monday, 7 August, 2017, 0:41
 Greetings to all! I can see I'm not
 understanding the box model
 correctly considering this basic
 #green {
 background-color: green;
 width: 100px;
 height: 100px;
 float: left;       
 #red {
 background-color: red;
 width: 100px;
 height: 100px;     
 <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 --
css-discuss []
List wiki/FAQ --
List policies --
Supported by --

Reply via email to