[Evostance]

Ok so Im trying to scale and pad my divs so that my site looks correct. Sorry if this doesnt make much sense, ill post some pictures

Basically I want my site to look like this



However I want the background to be white so I can put other divs ontop, however I cant get it aligned and it looks like this



Here is my code:

<div align="center">
<div id="logo">
<img src="images/logo.gif" />
<div id="topbar">
<img src="images/roundcorner.gif" />
<div id="content">
</div>
</div>
</div>
</div>

and my css

@charset "utf-8";
/* CSS Document */

body {
	background-image: url(images/background.jpg);
	background-repeat:repeat-x;
	
}

#logo {
	float:left;
	width:800px;
	height:143px;

}

#topbar {
	float:left;
	width:800px;
	height:23px;

}

#content {
	background-color:#FFFFFF;
	height:860px;
	width:100%;
	float:left;

}

If anyone could help me solve this that would be great, otherwise its going to be background images in tables

[mgpwr]

Not too sure what you mean: i think this might help:

CSS Centering: Auto-width Margins

maybe lol

[haku]

You have all your divs nested so that they are like this:

<div>
    <div>
        <div>
            <div>
            </div>
        </div>
    </div>
</div>

Try changing the overall structure so that its like this:

<div id="header">
    <div id="logo"></div>
</div>
<div id="content_holder">
    <div id="top_bar"></div>
    <div id="content></div>
</div>

Give content_holder a left and right margin to indent it from the page a little, then set the width of top_bar and content to be 100%. content_holder will then be indented a little from both edges, and top_bar and content will be confined by content.