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

Advertising

<https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>
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 <garzon.luc...@gmail.com> wrote:
Subject: [css-d] Basic questions about the box model
To: "css-discuss" <css-d@lists.css-discuss.org>
Date: Monday, 7 August, 2017, 0:41
Greetings to all! I can see I'm not
understanding the box model
correctly considering this basic
example:
<style>
#green {
background-color: green;
width: 100px;
height: 100px;
float: left;
}
#red {
background-color: red;
width: 100px;
height: 100px;
}
</style>
<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
result.
Thanks in advance.
Cheers,
Ezequiel
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/