I think you’ll want to absolutely position the sidebar box to the top and right of your main background area. That main background area will need to have position:relative set in order for the other bit to be placed where you want.
something like:
#mainbackground {position:relative; width:800px;}
#sidebarcontainer{position:absolute; top: 50px; left:820px; width:200px;}
This would move it 20px to the right of the mainbackground div.
I wasn’t going to suggest a positioning solution, but you can try that first it would be easiest.
But I think that what you are looking for isn’t simple. It would require setting the width of your background/wrap/page to be wider. And then fixing your main content column to keep it’s current width. (how you do that depends on the nested div’s in your theme and whether it is floating or fixed. And then getting the sidebar to float to the right of your new background width. Or float left with a left-margin depending on how the other boxes on your page are set up.
This is because you’ll want to keep the sidebar OUT of your content div so that it can take up 100% of the height of your blog. If not, then your main content column will wrap under the sidebar.
Position is very important and the basis of a strong theme. You DO want a good theme because we are not just working with html here – this is dynamic content and it has a way of breaking your styles!
hope that gives you a direction to go in.
You could do floats (it’s probably what I would do). Then you have to make sure to clear them so everything looks ok. I tried with positioning and I’m liking how the sidebar is now totally independent of the content. Every width does need to specified, either as px, em or %.
Here’s what I mocked up to test positioning:
<style type="text/css">
<!--
body {background-color:#000; text-align:center; margin:0; padding:0;}
#wrapper {text-align:left; width:920px; margin: 40px auto; position:relative;}
#mainbackground {position:relative; width:680px; background-color:#333333;}
#sidebarcontainer {width:200px; background-color:#333; position:absolute; top:50px; left:700px;}
#container {background-color:#fff;}
#header {height:150px; background-color:#6699CC;}
p {margin:0; padding:12px;}
#sidebarcontainer p {color:#fff;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="mainbackground">
<div id="container">
<div id="header"><p>header with photo and navigation</p></div>
<div id="content"><p>content area</p><p>text goes here without affecting sidebar area</p><p> </p><p> </p></div>
</div>
</div>
<div id="sidebarcontainer">
<p>sidebar goes here</p>
</div>
</div>
The wrapper is only there to keep the whole bit centered in the browser window. If you don’t need centering, take it out.
There are many other ways to approach this though. Gotta love css.
csleh, I would love to get that figured out, how to get things to be independent of each other. But every time I try to position things I get IE problems. usually lots of them!
If the above doesn’t work in ie, it’s likely a known browser issue. Position is everything is usually very helpful in fixing these:
http://www.positioniseverything.net/explorer.html
I’m using firefox on a mac so can’t duplicate to point you in a different direction. sorry
