...

View Full Version : Problem with divs and 100% height



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>

abduraooft
04-14-2009, 02:06 PM
You'd need to adopt the faux-column approach (http://www.alistapart.com/articles/fauxcolumns/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum