what is the best way to construct the css floats and width size to my div layout?

Here is the layout of my Html div

HTML: Select all

<div id="wrapper"> // Main wrapper
    <div id="Content"> // Wrapper for the Header
        <div id="Logo">Logo Goes here</div>
        <div id="Header">Header goes</div>
    </div>
    <div id="NavigationContent"> //Wrapper for the Navigation
        <div id="Navigation">Navigation Goes here</div>
        <div id="SearchBar">Search Goes here</div> 
    </div>
    <div id="ContentWrapper"> // Wrapper for the Content
        <div id="MainContent">Main Content Goes HERE</div>
        <div id="RightContent">Right Content GOes HERE</div>
    </div>
    <div id="Footer">Footer Goes Here</div>
</div>

I want the overall site to be Fixed 950 pixel, with the site to be in the center. Could you please
advise me on the best way to code the css floats and the with size of my above divs.

Shall I have the main wrapper as 100% width and left and right margins to auto and then float the rest of the div to left or
is there any other best way.

Thanks for all the replies.

Ket

Give the main wrapper "margin: 0 auto" and "width: 950px".

Float the right content with "float: right" and "width: 200px" (change the width as you please).

Apply "clear: both" to the footer.

There are several variations, of course; it all depends on what exactly you wish to achieve.

Thanks for your reply.. Just one more question, if I set the main wrapper to 950 px and the margins to auto. and within that say I have Content Wrapper that wraps the Main content and a Right Column Content, what floats I would apply to the Content Wrapper, Main Content and Right Column Content.

I will be floating the Main Content to "left" and Right Column Content to "Right" and the main content will 650 px and the right colume to be 300 px.

Do I float the content wrapper? and how can I make sure it only wraps the div Main Content and the div Right Column Content. I always seem to mess up my template as I go along, so just want to have a rough design guideline.

Thanks..

I would just set the width of one of your columns -- the narrower one -- and leave the other one to adjust automatically.

There's no need to float both columns (one left, one right). Just float the narrow one (which has an explicit width). Specifying a width for floats is a Good Idea.

Feel free to experiment, however!

Thanks for your advise, I will be creating my base template in the evening, I will let you know if I have any problems.

Thank,