You can avoid all the problems of box model by using box-sizing. I suggest read this Mozilla (MDN) article:
<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/
