centered layout with/without sidebanner - css

Question

I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(

Answer 1

Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}

Answer 2

i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}

Answer 3

Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.