PDA

View Full Version : Fixed Sidebar Layout



keyterm
Jul 25th, 2010, 02:22 AM
I'm trying to make a centered 2-column layout with a fixed sidebar, but I can't seem to get the sidebar in the right position. Right now, instead of being on the right of the main content column, it's in the exact same position as it, overlapping on top. Can someone help me fix it?


#container {
width: 690px;
margin: 0 auto;
position: relative;
background: #ee2020;
}

#sidebar {
float: right;
position: fixed;
width: 200px;
margin-top: 10px;
padding: 10px;
text-align: justify;
background-color: #5bcff4;
}

#post {
float: left;
width: 450px;
padding: 10px;
margin-top: 10px;
background-color: #fff;
font-family: helvetica, arial;
font-size: 11px;
letter-spacing: 1px;
color: #666;
}

optimus203
Jul 25th, 2010, 05:39 AM
Something like this?



<html>
<head>
<style type="text/css">
body {
background: #ee2020; }

#container {
width: 690px;
margin: 0 auto;
position: relative;
top: 0; left: 0;
background: #ee2020;
}

#sidebar {
float: right;
width: 200px;
margin-top: 10px;
padding: 10px;
text-align: justify;
background-color: #5bcff4;
}

#post {
float: left;
width: 450px;
padding: 10px;
margin-top: 10px;
background-color: #fff;
font-family: helvetica, arial;
font-size: 11px;
letter-spacing: 1px;
color: #666;
}
</style>
</head>

<body>

<div id="container">
<div id="sidebar">
Sidebar content
Sidebar content
Sidebar content
Sidebar content
v
v
</div>
<div id="post">
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
v
v
v
</div>
</div>

</body>
</html>

keyterm
Jul 25th, 2010, 07:15 AM
No, sorry, I want the sidebar to stay in the same position when the main content scrolls.

optimus203
Jul 25th, 2010, 07:29 PM
Gotcha, so something like this? Note: I was trying to make the sidebar fixed in proportion to the Post section, but from my limited research, the position: fixed; declaration is in relation to browser window, so I'm not sure if you have position: fixed; in relation to containing divs. Anyone know if this is possible?



<html>
<head>
<style type="text/css">
body {
background: #ee2020; }

#container {
width: 690px;
margin: 0 auto;
position: relative;
top: 0; left: 0;
background: #ee2020;
}

#sidebar {
position: fixed;
top:0; right:0;
width: 200px;
margin-top: 10px;
padding: 10px;
text-align: justify;
background-color: #5bcff4;
}

#post {
width: 450px;
padding: 10px;
margin-top: 10px;
background-color: #fff;
font-family: helvetica, arial;
font-size: 11px;
letter-spacing: 1px;
color: #666;
}
</style>
</head>

<body>

<div id="container">
<div id="sidebar">
Sidebar content
Sidebar content
Sidebar content
Sidebar content
v
</div>

<div id="post">
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
POST POST POST POST POST POST POST POST v POST POST POST v
</div>
</div>

</body>
</html>