CSS layout how to order

lozza · 3 Aug 2006 at 22:51

This may seem a strange question, or it maybe perfectly normal but when creating your website using CSS do you work horizontally across the screen from left to right or work vertically top to bottom?

Basically Is there a set way in which you should order your CSS

Gman · 3 Aug 2006 at 22:57

i supose it depends on the layout, overall you could say its a top to bottom , left to right then outside to in sort of thing. But with the CSS the order of say the DIV might not matter depending how you style them.

iCraig · 3 Aug 2006 at 23:55

CSS stands for cascading style sheet.

Ideally, your CSS should follow the same rough order in your mark up.

Example.

Code:

<body>
  <div id="container">
    <div id="header">stuff</div>
    <div id="content">stuff</div>
    <div id="footer">stuff</div>
  </div>
</body>

Code:

body {
  stuff: stuff;
 }

#container {
  stuff: stuff;
 }

#header {
  stuff: stuff;
 }

#content {
  stuff: stuff;
 }

#footer {
  stuff: stuff;
 }

lozza · 4 Aug 2006 at 12:50

Thanks for the replies, should have said that i know the basics.

How would you do it if in your content you had say 6 boxes of information:

content 1 content 2 content 3

content 4 content 5 contnet 6

would you do your divs as 123456 or 142536

Gman · 4 Aug 2006 at 12:56

Harib0 said:
Thanks for the replies, should have said that i know the basics.

How would you do it if in your content you had say 6 boxes of information:

content 1 content 2 content 3

content 4 content 5 contnet 6

would you do your divs as 123456 or 142536

I could do it as 123456 , to d it the other way you'd probably be force to use extra wrapper div's, at least with 123456 you can use the css to keep the div's displayed inline where needed.

Augmented · 4 Aug 2006 at 14:21

Order of CSS rules come into action when you're trying to avoid clashes between two or more conflicting selectors and/or rules of identical specifity, or deal with precedence between different style locations e.g. author CSS, inline styles, user CSS and so on.

See:

Code:

div p {
color: red;}

body p {
color: blue;}

Both rules have identical specifity, and so only the latter gets applied to a <p> within a <div> according to the rule of the cascade = the <p> will be blue. Switch them round and the <p> becomes red.
You can simply get around this by making your rules more specific, and not have to worry about rule order e.g. changing div p {} to body div p {} increases its specifity and it won't be overriden by the other rule.

Whereas:

Code:

#header p { color: red;}
#footer p { color: blue;}

and

Code:

#footer p { color: blue;}
#header p { color: red;}

also have identical specifity, but have no selector conflict. This means it makes no difference which order they're in (assuming they're sibling elements).

Markup order, which I think is what you're really asking about, can sometimes make a difference as to the method you use to lay out a document with CSS. You should aim to lay out your markup in the sequence that makes the most sense when unstyled.

Don't think of your markup order in terms of how you want it to appear when styled. If content1 should come after content2, then that's the order it should be in your markup.

Floated layouts can in particular suffer from markup rules in some implementations - there's some discussion of the problems involved here and here.

Sic · 4 Aug 2006 at 14:55

as Augmented danced around - if you're floating, yes it matters...and your markup should read in the order of your floats - ie. left to right, top to bottom...but if you're absolutely positioning your elements, it doesnt *really* matter, in my experience