Side by side divs, one centered?

[peeaitchpee]

I am having a little difficulty with aligning two divs.

I have one 800 wide div that has the site content...it needs to be centered at all times.

The second div is 160 wide and I want it at the same height as the first, but ten pixels to its right.

This image should visually show it:

http://www.yanks-abroad.com/extras/example.gif

I have tried absolute position 50% 0% for the first with the second as relative..and it overlays it...treid different combinations of float as well.

What am I doing wrong?

Thanks in advance

[X96 Web Design]

First, you need a container, this should do it:


#container {
display:block;
width:965px; /* 800 + 160 + 5 (space in between)
margin:0 auto;
text-align:left;
}

And add text-align:center; to your BODY styles. (IE bug)

For the first DIV, use this:


display:block;
margin-right:160px; /* Sidebar Width */


For the sidebar... :


#sidebar {
float:right;
display:block;
width:160px;
margin-left:5px;
}


Then, use this as your HTML:


<div id="container">
<div id="sidebar">
Sidebar Content goes in here
</div>
<div id="content">
Main content goes here.
</div>
</div>


Or, you can use the DD Layouts (http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-22-fixed-fixed/) if you want

For the same height, use the DD Equal Height Script (http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/).

Hope this helps,
X96

[bisunath]

no brother this not acceptable

it has to be like this

..........[div]

.......[div][div]

.[div][div][div][div]

....[div][div][div]

now plz solve :)