Basic questions about the box model

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Basic questions about the box model

Ezequiel Garzón-2
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Basic questions about the box model

Georg-2
Den 07.08.2017 01.41, skrev Ezequiel Garzón:
> 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.

Content - like the word "Red" - is initially defined to flow outside
preceding floats, even if it means flowing outside its own container.
Backgrounds are defined to not do that, unless block-formatting is
declared on the container the background is declared on, in which case
the container itself will flow outside preceding floats.
So with identical dimensions on the two containers, and no
block-formatting, or clear, declared on the last container, the result
you get is logical and as expected.

See: https://www.w3.org/TR/CSS2/visuren.html#block-formatting

regards
         Georg

______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Basic questions about the box model

Jay Tanna
In reply to this post by Ezequiel Garzón-2
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 <[hidden email]> wrote:

 Subject: [css-d] Basic questions about the box model
 To: "css-discuss" <[hidden email]>
 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 [[hidden email]]
 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Basic questions about the box model

Ezequiel Garzón-2
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 <[hidden email]> 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 <[hidden email]> wrote:
>
>  Subject: [css-d] Basic questions about the box model
>  To: "css-discuss" <[hidden email]>
>  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 [[hidden email]]
>  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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Basic questions about the box model

Georg-2
Den 12.08.2017 20.52, skrev Ezequiel Garzón:
> 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.

Well, I do not even know if that particular behavior was /intentionally/
/defined/, or if it came about by accident...

Look at it this way: the first browsers was developed without much of
what we may call "standards", and there was _no_ CSS to begin with.
Standards came later, and those first standard bodies simply picked up
what there was some agreement about between competing browser
developers, and mainly wrote "status quo" at the time into standards for
HTML.
Even later, when the first - basic - CSS standards was formulated, they
kept on building those on "status quo" in the browser world, while
trying to refine these standards in such a way that browser developers
would come on board and actually develop browsers that (more or less)
followed the same standards, in order to achieve interoperability.
Lots of "less logical solutions" got dropped as standards organs -
mainly the W3C - wrote and cleaned up standards, but there are still
plenty "less logical" stuff left in today's standards from way back in
the browser war era. Some of the old stuff is also left in today's
standards to assure that new browsers that /follow /standards can render
quite old pages /somewhat/ acceptable.

So, I don't know /who /- once upon a time - defined this particular
behavior - some browser developer or a standard body, or /why/ they did
it. Clearly noone has found good reasons to change it over the years, so
now we are kind of stuck with it. As standards have evolved to provide
us with ways to code around and/or avoid old behaviors that we don't
like, it should not cause us any real problems for us today.

regards
         Georg
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Basic questions about the box model

Ezequiel Garzón-2
What a treat, Georg! THIS kind of insight is what I was hoping for.
I'll try to accept the standards more as a given and not to think too
much about foundational issues, though sometimes these aspects
intrigue me. For instance, and as an aside, while it's commonly
claimed that floats were not intended for layout, Wium Lie rejects
this notion in https://dev.opera.com/articles/css-twenty-years-hakon/.

Thanks again.

On Sun, Aug 13, 2017 at 2:49 AM, Georg <[hidden email]> wrote:

> Den 12.08.2017 20.52, skrev Ezequiel Garzón:
>>
>> 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.
>
>
> Well, I do not even know if that particular behavior was /intentionally/
> /defined/, or if it came about by accident...
>
> Look at it this way: the first browsers was developed without much of what
> we may call "standards", and there was _no_ CSS to begin with. Standards
> came later, and those first standard bodies simply picked up what there was
> some agreement about between competing browser developers, and mainly wrote
> "status quo" at the time into standards for HTML.
> Even later, when the first - basic - CSS standards was formulated, they kept
> on building those on "status quo" in the browser world, while trying to
> refine these standards in such a way that browser developers would come on
> board and actually develop browsers that (more or less) followed the same
> standards, in order to achieve interoperability.
> Lots of "less logical solutions" got dropped as standards organs - mainly
> the W3C - wrote and cleaned up standards, but there are still plenty "less
> logical" stuff left in today's standards from way back in the browser war
> era. Some of the old stuff is also left in today's standards to assure that
> new browsers that /follow /standards can render quite old pages /somewhat/
> acceptable.
>
> So, I don't know /who /- once upon a time - defined this particular behavior
> - some browser developer or a standard body, or /why/ they did it. Clearly
> noone has found good reasons to change it over the years, so now we are kind
> of stuck with it. As standards have evolved to provide us with ways to code
> around and/or avoid old behaviors that we don't like, it should not cause us
> any real problems for us today.
>
> regards
>         Georg
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Basic questions about the box model

Georg-2
Den 13.08.2017 23.04, skrev Ezequiel Garzón:
> What a treat, Georg! THIS kind of insight is what I was hoping for.
> I'll try to accept the standards more as a given and not to think too
> much about foundational issues, though sometimes these aspects
> intrigue me.
I get that. Curiosity is good ... just don't try to find pure logic
behind//everything you run into, as it may not lead to much. And, there
will always be bugs...

> For instance, and as an aside, while it's commonly
> claimed that floats were not intended for layout, Wium Lie rejects
> this notion in https://dev.opera.com/articles/css-twenty-years-hakon/.
It is "highly illogical" that we should avoid the use of any
design-technique that actually works, just because someone else in the
profession happens not to like it. We just have to learn to master all
the various techniques - in depth and in combination, so we can choose
the best solutions for each task at hand.

As one who has, and still is, using floats for just about everything the
technique works well for - and then some, I am well aware of the
arguments against floats for layout that have  been "floating around"
for decades. Has never bothered me, and some of my first inspirations
for the more intricate uses of floats for layout was derived from the
code behind Wium Lie's early articles on the W3C site.

> Thanks again.
You're welcome.

regards
         Georg
______________________________________________________________________
css-discuss [[hidden email]]
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/
Loading...