So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.
When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.
There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>
<style type="text/css">
body, html {
background: black;
width:100%;
height:100%;
padding:0;
margin:0;
}
#left {
position:absolute;
top:10%;
left:0;
background: #eeeeee;
width: 20%;
padding: 2%;
margin:0;
}
#right {
position:absolute;
top:10%;
left:76%;
background: #eeeeee;
width: 20%;
padding: 2%;
margin:0;
}
#center {
position:absolute;
top:10%;
left:24%;
background: #ffffdffffd;
width: 48%;
padding: 2%;
margin:0;
}
#flash {
background:red;
width: 500px;
height: 500px;
padding:0;
margin:0;
}
ul {
height: 500px;
padding:0;
margin:0;
padding-left:25px;
background: #4359ac;
color: #ffffff;
}
li {
height: 10%;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="left">
<ul>
<li>Spa</li>
<li>Hotel</li>
<li>Activities</li>
<li>Hobbies</li>
<li>Night Life</li>
<li>Food</li>
<li>Feedback</li>
<li>Contact</li>
<li>About Us</li>
<li>Copyright</li>
</ul>
</div>
<div id="center">
<div id="flash">Here's your flash Object</div>
</div>
<div id="right">
here's the right div
<br>
<p>Let's throw some random text in here to take up space for now.</p>
</div>
</body>
</html>
The other option you have is to wrap the three columns in a container div, and define a height for that div, then stretch each of the columns to 100% height within that container div.
加载中...
