Problems creating a fixed width sidebar (newbie at work)

liunx · Jan 12, 2008

I've created a 2 column layout for my web site at <http://www.alphalink.com.au/~joe/> with percentages for the width of each column, the relevant code in my style sheet <http://www.alphalink.com.au/~joe/stylesheet.css> is:

div#main{float:left; width:74%; padding:20px 3% 0px 5%; background:#edFFFF; text-align:justify;}

div#sideBar{margin:0px; padding:0px 10px 14px 10px; text-align:center;}

then in each document:
...
<body>

<div id=header>
...
<div id=description>
...
</div>

<div id=main>
...
</div>
<div id=sidebar>
...
</div>
</body>
</html>

Now I want to make the sidebar a fixed pixel width, eg. 195px. Ideally I would like to keep it on the right, but I would think that doing:

div#main{float:right; ...}

div#sideBar{float:left; width:195px; ...}

in my stylesheet & swapping around the <div id=main> & <div id=sidebar> div's in my documents should work with the sidebar on the left, however the main div gets placed below the sidebar & to the right of the sidebar is just empty space.

What am I doing wrong & can I place a fixed width sidebar div to the right of a variable width main div? Thanks.Piece of cake.

<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

And in CSS

#sidebar{
float: right;
width: 200px;
}

#content {
margin-right: 200px;
}

#footer {
clear: both;
}

You might also like A List Apart: Articles: Creating Liquid Layouts with Negative Margins (<a class="postlink" href="http://www.alistapart.com/articles/negativemargins">http://www.alistapart.com/articles/negativemargins</a>). Also get to know the CSS Box Model (<a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a>).Thanks heaps. That was fast

Problems creating a fixed width sidebar (newbie at work)

liunx

Guest