I can’t get my divs to layout properly. I’m trying to have a top bar which is 200px high and takes up 100% width. Under that is a left bar which is 200px wide and 100% height then a right bar which will take up the rest of the space.
What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>my view</title>
<style>
#tb {
background-color:#cc0000;
height:200px;
width:100%;
position:relative;
}
#lb {
background-color:#00cc00;
width:200px;
height:100%;
float:left;
}
#rb {
background-color:#cccccc;
height:100%;
float:right;
}
</style>
</head>
<body>
<div id="page" style="width:100%;height:100%">
<div id="tb" style=""/>
<div id="lb"/>
<div id="rb" style=""/>
</div>
</body>
</html>
It looks even worse when I put some content in the divs:
<div id="tb" style="">test</div>
<div id="lb">test</div>
<div id="rb" style="">test</div>
height: 100%orwidth: 100%are not the rest of the size, but the overall size of the parent, ie the entire document.Here is an example of what you want using a table.
Here is an exemple with divs.