div and css structure

Question

I have the following page structure

<div id ="site-wrapper">
  <div id ="banner">

    <div id="menu">   
       <center>Menu Goes Here</center>
    </div>

  </div>

  <div id="content">
      <center>Content Goes here</center>
  </div>

  <div id="sidebar_r">
    <center>Right sidebar</center>

    <div id="sidebar_top">
      Sidebar top
    </div>

    <div id="sidebar_middle">
      Sidebar middle
    </div>

    <div id="sidebar_bottom">
      Sidebar bottom
    </div>

  </div>

</div>

How do i structure the css . I have used ids for all of the divs is there a better way to do it?

Im guessing you want us to build the website for you? You should look at other websites that have similar structures and then firebug it if you have firefox or look at the source code. But yes divs are better than using the archaic tables method. — Laurence Burke
– Laurence Burke, Commented May 5, 2011 at 16:24
Ok these answers that are given other than good sites for examples of css layouts and practices are very counter productive. Don't tell them how to do it show them how to learn to do it. Also this isn't a technical question that merits throwing code at it. — Laurence Burke
– Laurence Burke, Commented May 5, 2011 at 16:30

mcgrailm · Accepted Answer · 2011-05-05 16:24:33Z

3

htmldog's css for beginner

answered May 5, 2011 at 16:24

mcgrailm

17.7k22 gold badges86 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iancrowther · Accepted Answer · 2011-05-05 16:42:11Z

Have a look at the html5 spec - http://www.whatwg.org/specs/web-apps/current-work/multipage/

You can make use of elements such as "header", "footer", "nav" and "section". this will reduce the amount of id's you have to set in your css and make your markup more semantic.

also, having lots of css selectors stacked will have a performance hit.

In regard to you question!

an example css structure could be..

#menu center { ... }
#sidebar_r center { ... }

try not to go mad like

#site-wrapper #banner #menu center { ... }

your css parser has more work todo and your css becomes less manageable if you wanted to rename say #site-wrapper to #container.

my rule of thumb is..

use an id if the element is a container or only appears once.
use a class if the element appears more than once such as li's. make use of tags, i only use an id or a class if its required. you can always add it later.

Shane Andrade · Accepted Answer · 2011-05-05 16:24:43Z

0

I would suggest replacing your <center> tags with <span> tags instead, then applying a text-align:center style in your css. As far as structuring your css... it depends how it should look. Can you be more specific?

answered May 5, 2011 at 16:24

Shane Andrade

2,67518 silver badges20 bronze badges

Comments

MikeM · Accepted Answer · 2011-05-05 16:28:11Z

0

Download some of these templates and study how they setup their sites layouts:

http://www.freecsstemplates.org/

http://www.templatemonster.com/free-templates.php

answered May 5, 2011 at 16:28

MikeM

27.5k4 gold badges68 silver badges80 bronze badges

Comments

NewUser · Accepted Answer · 2011-05-05 16:28:49Z

0

ya you can use both ID and Class for css but remember one thing that ID has better specificity than class.So whenever you are using class you can use multiple classes at a time but if you are using ID then you can use one ID.For better CSS after writing your css make it validate through w3c css validator. To know the css specificity check this link and decide what will be your css.

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

answered May 5, 2011 at 16:28

NewUser

13.4k40 gold badges150 silver badges242 bronze badges

Comments

davethegr8 · Accepted Answer · 2011-05-05 16:26:09Z

-1

At the simplest, all you need to use is:

#sidebar_r {
    float: right;
}

answered May 5, 2011 at 16:26

davethegr8

11.7k5 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

div and css structure

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related