PDA

View Full Version : CSS Sidebar



rampantandroid
Apr 5th, 2007, 08:24 PM
OK...here's what I'm looking for - A sidebar, or box...that does not span the page vertically...I'm trying to do it in div layers, and this will be a dynamic page, so it'll need to be able to render text without needing changes...if possible.

http://i19.photobucket.com/albums/b164/jaguar4192/css.png

If anyone can point me in the right direction, I've looked around for methods that work in all broswers, but not had any luck...I get it working in IE, FF doesn't like it...and so on.

Thanks!

Arbitrator
Apr 5th, 2007, 09:28 PM
Use float: right.

rampantandroid
Apr 5th, 2007, 10:04 PM
the background I have that makes the one div layer look like it has a drop shadow, no longer spans the whole length of the page the second I use a float:right....


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Patrick Gianelli's Homepage</title>
</head>
<body id="homepage-body">
<div id="content-background" style="width:100%; float:none;">
<font color="#FFFFFF">

<div id="banner">
</div>


<div id="menu-bar">
<div style="margin-bottom:auto; margin-top:auto; vertical-align:middle; padding-top:5px;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Coding&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Links
</div>
</div>

<div style="width:874px; margin-left:auto; margin-right:auto; padding-top:1px;">
<div style="background-color:#B0C0D0; width:100%; padding:0px;">
<div style="padding:10px;">
<h3 style="padding-left:15px;">New Post</h3>
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />

</div>
<br />
<div style="padding:10px;">
<h3 style="padding-left:15px;">New Post</h3>
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br />
</div>

</div>


<div style="background-color:#F9FAEA; text-align:center; width:124px; position:static; top:0px; right:0px; float:right;">
<font color="#000000">
Sidebar<br />
Link<br />
<br />
<br />
Link<br />
<br />
<br />
Link<br />
<br />
<br />
Link
</font>
</div>

</div>
</font>


</body>
</html>

and my stylesheet:


/* CSS Document */
#page {
background-image:url(images/fade.png);
background-position: center;
background-repeat: repeat-y;
}

body {
background-color: #213449;
color: white;
margin: 0;
padding: 0;

}

#main-table-wrapper
{
margin-left: auto;
margin-right: auto;
}

#homepage-body{
background-color:#254261;
margin-left: auto;
margin-right: auto;
}

#banner{
background-color:#FFFFFF;
height:166px;
width:900px;
background-image:url(images/background_name.png);
background-repeat:no-repeat;
margin-left: auto;
margin-right: auto;
}

#menu-bar{
background-image:url(images/menubar.png);
height:30px;
width:900px;
margin-left: auto;
margin-right: auto;
text-align:center;
}

#content-background{
background-image:url(images/fade.jpg);
background-position: center;
background-repeat: repeat-y;
}

#content-wrapper{
width:845px;
margin-left: auto;
margin-right: auto;
}

#content{
background-color:#FFFFFF;
width:780px;
float:left;
padding-right:10px;
padding-left:10px;
}


#sidebar-wrapper {
float: right;
width: 45px;
background-color:#FFFFFF;
}

#content-sidebar{
width:45px;
background-color:#FFFFFF;
position:relative;
float:right;
}


Thanks

Excavator
Apr 5th, 2007, 11:38 PM
Hello rampantandroid,

the background I have that makes the one div layer look like it has a drop shadow, no longer spans the whole length of the page the second I use a float:right....

Read about clearing floats here. (http://www.quirksmode.org/css/clearing.html)

rampantandroid
Apr 6th, 2007, 02:09 AM
Hello rampantandroid,


Read about clearing floats here. (http://www.quirksmode.org/css/clearing.html)

Thanks, that fixed the background issue, but the div layer still refuses to align where it should. Just using a float right makes it sit right, but below all my other layers...

if someone could write a quick sample up, it might do better?

Thanks!

_Aerospace_Eng_
Apr 6th, 2007, 02:23 AM
Just post a link to your page. Help us help you.

rampantandroid
Apr 6th, 2007, 03:33 AM
Just post a link to your page. Help us help you.

That's the problem...I don't have it up anywhere that people can get to...I haven't gone and gotten a server yet, I instead am developing the theme and php code on my own apache server...

I posted the code above...only change was I added in the code for clearing floats.

twodayslate
Apr 6th, 2007, 03:41 AM
If it sits behind something use z-index or position: absolute;