div and css structure

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 id开发者_C百科s for all of the divs is there a better way to do it?

htmldog's css for beginner

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.

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?

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

http://www.freecsstemplates.org/

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

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/

At the simplest, all you need to use is:

#sidebar_r {
    float: right;
}