Programming Forums

Programming Forums (http://www.programmingforums.org/forumindex.php)

- Other Web Development Languages (http://www.programmingforums.org/forum40.html)

- - CSS help (http://www.programmingforums.org/showthread.php?t=11741)

Im pretty inexperienced at CSS, and right now I am trying to get a sidebar up beside a set of divs...anyways some wierd stuff is happening: (screenshot) http://www.ncrusaders.com/random/error.jpg

here is the css that defines it:

#sidebarbg{

    width: 131px;

    float: right;

    clear: left;

    background: url(images/sidebarbg.jpg);



}

#sidebartop{

    width: 131px;

    float: right;

    clear: left;

    height: 20px;

    background: url(images/sidebartop.jpg);



}

#sidebarbottom{

    width: 131px;

    float: right;

    clear: left;

    height: 20px;

    background: url(images/sidebarbottom.jpg);



}

and the html...

<div id="sidebartop">

</div>

<div id="sidebarbg">

test

</div>

<div id="sidebarbottom">

</div>

Help would be greatly apreciated. I posted this on another forum like 5 hours ago and still havnt gotten a response :(

A whole 5 hours, eh? :p

Anyway, just wrap all your divs up inside another div, like so:

<div id="sidebar">

  <div class="top"></div>

  <div class="body">

    test

  </div>

  <div class="bottom"></div>

</div>

With the corresponding CSS:

#sidebar {

    width: 131px;

    float: right;

}



#sidebar .top {

    height: 20px;

    background: url(images/sidebartop.jpg);

}



#sidebar .body {

    background: url(images/sidebarbg.jpg);

}



#sidebar .bottom {

    height: 20px;

    background: url(images/sidebarbottom.jpg);

}

I'd put them in an enclosing div, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>

#enclose{

    width: 132px;

    float: right;

    clear: left;

    height: 100%;

}

#sidebarbg{

    width: 130px;

    clear: left;

    background: url(images/sidebarbg.jpg);

}

#sidebartop{

    width: 130px;

    clear: left;

    height: 20px;

    background: url(images/sidebartop.jpg);

}

#sidebarbottom{

    width: 130px;

    clear: left;

    height: 20px;

    background: url(images/sidebarbottom.jpg);

}

</style>

<title>Untitled Document</title>

</head>

<body>

<div id="enclose" style="border: 2px solid #00ff00;">

<div id="sidebartop" style="border: 2px solid #ff0000;">Top

</div>

<div id="sidebarbg" style="border: 2px solid #ffff00;">

Center

</div>

<div id="sidebarbottom" style="border: 2px solid #0000ff;">Bottom

</div>

</div>

</body>

</html>

http://www.daweidesigns.com/images/sidebar.jpg
And if those sorry volunteer suckers didn't respond within 5 hours on a Sunday, I'd demand my money back!!!

LOL! Your post wasn't there when I went off to test it, and I didn't refresh the page!