centered layout with/without sidebanner

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 :(

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;
}

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
}

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.