Re: [css-d] Separating DIVs vertically
Keith, By default. block-level elements occupy the full available width, thus any following block-level elements can only appear directly below. This is as long as they are statically positioned, and in standard (which everything is, by default). The same applies to paragraphs, headings, lists, etc. Floating elements, positioning them absolutely, or setting their display value to something other than block will override this behaviour. Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 __ 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/
Re: [css-d] Separating DIVs vertically
Barney Carroll wrote: Keith, By default. block-level elements occupy the full available width, thus any following block-level elements can only appear directly below. I am unconvinced of this explanation. At http://web-consultants.org.uk/sites/tests/Block-level-elements/DIVs.html you will see two DIVs, each of which is only 33% of the full available width, yet they stack vertically, not horizontally. I would argue that this behaviour has nothing to do with their width, and is entirely a result of their being block-level elements. Philip Taylor __ 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/
Re: [css-d] Separating DIVs vertically
On 5/06/2011 11:05 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: Barney Carroll wrote: Keith, By default. block-level elements occupy the full available width, thus any following block-level elements can only appear directly below. I am unconvinced of this explanation. At http://web-consultants.org.uk/sites/tests/Block-level-elements/DIVs.html you will see two DIVs, each of which is only 33% of the full available width, yet they stack vertically, not horizontally. I would argue that this behaviour has nothing to do with their width, and is entirely a result of their being block-level elements. Philip Taylor It is really do with block flow direction. http://dev.w3.org/csswg/css3-writing-modes/#text-flow | The block flow direction is the direction in which | block-level boxes stack and the direction in which | line boxes stack within a block container. The | ‘writing-mode’ property determines the block flow | direction. What you are observing is what happens in a Latin-based writing mode. If the boxes that have a width of 33% are in LTR inline base direction, the boxes will appear visually stack downward on the left side of the viewport. If the boxes that have a width of 33% are in RTL inline base direction, the boxes will appear visually stack downward on the right side of the viewport. The thing that set the base direction are the attributes dir=ltr or dir=rtl. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ 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/
Re: [css-d] Separating DIVs vertically
Alan Gresley wrote: It is really do with block flow direction. http://dev.w3.org/csswg/css3-writing-modes/#text-flow | The block flow direction is the direction in which | block-level boxes stack and the direction in which | line boxes stack within a block container. The | ‘writing-mode’ property determines the block flow | direction. What you are observing is what happens in a Latin-based writing mode. So, what would you expect to happen if the writing mode were top-to-bottom ? Would you then expect the DIVs to stack side by side ? I would not, but of course I am always open to being surprised ! Philip Taylor __ 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/
Re: [css-d] Separating DIVs vertically
On 5/06/2011 11:53 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: Alan Gresley wrote: It is really do with block flow direction. http://dev.w3.org/csswg/css3-writing-modes/#text-flow | The block flow direction is the direction in which | block-level boxes stack and the direction in which | line boxes stack within a block container. The | ‘writing-mode’ property determines the block flow | direction. What you are observing is what happens in a Latin-based writing mode. So, what would you expect to happen if the writing mode were top-to-bottom ? Would you then expect the DIVs to stack side by side ? I would not, but of course I am always open to being surprised ! Philip Taylor Do you have IE8, IE9 or IE10? If so, view these test. The first is like Latin-based writing mode with LTR inline direction rotated 90 degrees clockwise. Used for Chinese, Japanese and Korean scripts. http://css-class.com/test/css/bidi/kanji-test1-extra.htm The second is a left to right mirror copy of the above in respect to block flow direction. Use for old Mongolian script. http://css-class.com/test/css/bidi/mongolian-test1-extra.htm Then there is a writing mode that no uses but is like Mongolian vertical but rotated 90 degrees anti-clockwise. http://css-class.com/test/css/bidi/steet-text-test1-extra.htm -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ 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/
Re: [css-d] Separating DIVs vertically
On Jun 5, 2011, at 10:05 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: Barney Carroll wrote: Keith, By default. block-level elements occupy the full available width, thus any following block-level elements can only appear directly below. I am unconvinced of this explanation. At http://web-consultants.org.uk/sites/tests/Block-level-elements/DIVs.html you will see two DIVs, each of which is only 33% of the full available width, yet they stack vertically, not horizontally. I would argue that this behaviour has nothing to do with their width, and is entirely a result of their being block-level elements. It does have 'something' to do with the width, and the relationship between width and margin ( -left and -right). See CSS 2.1:10.3 – and in particular 10.3.3 http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins In that testcase, the margin-right is '0', but 'expanded' to fill the remaining space. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ 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/
Re: [css-d] Separating DIVs vertically
On Jun 5, 2011, at 10:53 PM, Philip TAYLOR (Webmaster, Ret'd) wrote:
So, what would you expect to happen if the writing mode were top-to-bottom ?
Would you then expect the DIVs to stack side by side ? I would not, but of
course I am always open to being surprised !
They would be stacked horizontally.
Based on your previous testcase in a top-to-bottom writing mode ('writing-mode:
vertical-rl;') - View in IE 8/9 or a recent Chrome build or WebKit nightly:
http://dev.l-c-n.com/_temp/test-cssd20110606.html
Note that 'width' is not applied at all, for the second (red background) div, I
applied a 'height' instead. That is the correct behaviour (physical vs logical
values).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
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/
Re: [css-d] Separating DIVs vertically
On Sat, Jun 4, 2011 at 4:29 PM, Keith Purtell keithpurt...@keithpurtell.com
wrote:
This may seem really basic, but I'm trying to figure out best practice
for stacking DIVs vertically. The first idea I had was a page with two
fixed-width DIVs inside a wrapper DIV of that same width. I thought the
second DIV would be forced down. Then I built a test page with three
sequential DIVs and gave each one a class that set display:block. All
three stacked up fine. Just to make sure it was the class causing that
positioning, I disabled the class, and the DIVs remained vertically
stacked. Does this mean sequential DIVs will inherently each fall into
position one on top of the other?
Yes, that's what DIVs do all on their own. Browsers provide a default
stylesheet that includes (among many other rules):
div { display: block; }
It's interesting to see those default styles. Here's a useful Google search:
http://www.google.com/search?q=browser+default+stylesheet
and here's the actual default stylesheet for WebKit:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
-Mike
__
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/
