Thank you Georg and Jay for your replies, and my apologies for not
saying anything until now.
Georg, while I haven't gone over the standard in depth, I assumed the
rendering I saw in all browsers was compliant, and in that sense
logical and expected. I was shooting for something along the lines of
why you think it was defined this way.
Maybe one day I'll study the (CSS 2) standard, and maybe I will find
out the rationale behind this decision, though I guess it's a better
bet to read the designers' book, "Cascading Style Sheets: Designing
for the Web", or Wium Lie's PhD thesis, wiumlie.no/2006/phd.
Jay, I don't see what you're telling me. If I add "* { box-sizing:
border-box }" to my CSS I get the same result.
Thank you both once again. Cheers!
On Wed, Aug 9, 2017 at 10:36 PM, Jay Tanna <jta...@rocketmail.com> wrote:
> 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/
