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:



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 if you want

For the same height, use the DD Equal 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