sidebars problems in css

hi...i'm a beginner in css and i try to do a little website with css. but i have some issues with that...the first is that my sidebars-divs are not extending the height, when the content it does...it comes a brek between the sidebars and the footer...i avoid this problem with setting the height for every div in every page...but i still now that's not a nice solution...please can somebody give me a idea to fix this...?

the other thing is...that mine javascript on the navigation menu is not working...it's works well locally, but not on the server...what i done wrong?

the website is

www.weltspaziergang.de

many thanks for your time and help!

cheers pfrauholle

The code for the stylesheet is like following

[
html, body{
margin:0;
padding:0;
background-color:#FDF8FF;
color:#344152;
font: Georgia, Arial, Verdana, sans-serif
}

#container {
width: 800px;
\width: 820px;
w\idth: 800px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 0;
margin-bottom: 0px;
height:150px;
background-color:#9BC4E2;
background-image:url(images/banner.gif);
background-repeat:no-repeat;
}

#content {
float:left;
width: 616px;
padding: 0;
margin: 0;
height:500px;
background-color: #F8F8FF;
background-image:url(images/banner2.gif);
background-position: top right;
background-repeat:no-repeat;
}

#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}

#sidebar-a {
float: left;
width: 150px;
margin: 0;
padding: 0;
height:500px;
background-image:url(images/left.gif);
background-position: bottom left;
background-repeat:no-repeat;
background-color:#FFF68F;
}

#sidebar-a p {
margin-left: 20px;
}

#sidebar-b {
float:left;
width: 34px;
margin: 0;
]

the html code is:

[
<SCRIPT LANGUAGE="JavaScript">
<!--

//pre-cache the off images from the menubar
var offImage = new Array()
offImage[0] = new Image(114,40)
offImage[1] = new Image(114,40)
offImage[2] = new Image(114,40)
offImage[3] = new Image(114,40)
offImage[4] = new Image(114,40)

//attch the source file to the off images
offImage[0].src = "homeButton.gif"
offImage[1].src = "usButton.gif"
offImage[2].src = "mapButton.gif"
offImage[3].src = "toysButton.gif"
offImage[4].src = "booksButton.gif"

//pre-cache the on images from the menubar
var onImage = new Array()
onImage[0] = new Image(114,40)
onImage[1] = new Image(114,40)
onImage[2] = new Image(114,40)
onImage[3] = new Image(114,40)
onImage[4] = new Image(114,40)

//attach the source file to the on image
onImage[0].src = "homeButton1.gif"
onImage[1].src = "usButton1.gif"
onImage[2].src = "mapButton1.gif"
onImage[3].src = "toysButton1.gif"
onImage[4].src = "booksButton1.gif"

//function that swaps the images
function fnOn(i,x) {
document.getElementById(x).src = i
}

function fnOff(i,x) {
document.getElementById(x).src = i
}

// -->
</SCRIPT>

</head>
<body>

<div id="content"><p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p><p>sdgsdfhdfh</p>

</div>

<div id="footer"> </div>
</div>
</body>
</html>
]

sidebars problems in css

pfrauholle

collymellon

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week