SKY-ProToSs
04-13-2009, 09:46 PM
I'm trying to make a layout but for some reason the side bars are extending past the middle content div and i have no idea whats wrong. If you have a solution that you can simply explain yourself i'd be happy to hear it. Thanks.
I solved the problem on my own by making div1 the content and floating center with 58% width, instead of using it as the container. Then I made a blank container to center everything but thanks anyway :)
Link is here http://www.freewebs.com/clan-aad
<!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" xml:lang="en" lang="en">
<head>
<title>Our Site: Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
background:#000000;
margin:0px;
padding:0px;
font-family:helvetica;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}
#div1 {
position: relative;
height:100%;
width:800px;
background:#F2F2F2;
margin:auto;
color:#000000;
}
#header {
width:100%;
height:30%;
background:blue;
color:#000000;
margin-top:0px;
}
#navbar2 {
position:relative;
float:right;
width:21%;
height:100%;
background:green;
color:#000000;
}
#navbar1 {
position:relative;
float:left;
width:21%;
height:100%;
background:green;
color:#000000;
}
</style>
</head>
<body>
<div id="div1">
<div id="header">
</div>
<div id="navbar1">
</div>
<div id="navbar2">
</div>
</div>
</body>
</html>
I solved the problem on my own by making div1 the content and floating center with 58% width, instead of using it as the container. Then I made a blank container to center everything but thanks anyway :)
Link is here http://www.freewebs.com/clan-aad
<!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" xml:lang="en" lang="en">
<head>
<title>Our Site: Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
background:#000000;
margin:0px;
padding:0px;
font-family:helvetica;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}
#div1 {
position: relative;
height:100%;
width:800px;
background:#F2F2F2;
margin:auto;
color:#000000;
}
#header {
width:100%;
height:30%;
background:blue;
color:#000000;
margin-top:0px;
}
#navbar2 {
position:relative;
float:right;
width:21%;
height:100%;
background:green;
color:#000000;
}
#navbar1 {
position:relative;
float:left;
width:21%;
height:100%;
background:green;
color:#000000;
}
</style>
</head>
<body>
<div id="div1">
<div id="header">
</div>
<div id="navbar1">
</div>
<div id="navbar2">
</div>
</div>
</body>
</html>