Hot Scripts Forums - View Single Post

Frogger · #9 (**permalink**) 07-27-09, 09:56 PM

I tried this but I just cant get the top and bottom to size according to the browser size like I can with the tables.

Code:

<html>
<head>
<title>div test</title>
<style type="text/css">

body {
padding:0;
margin:auto;
}

.outer {
width:100%;
}

.top { 
background-color:red;
height: 50%;
}

.center {
vertical-align:middle;
height:600px;
background-color:black;
}

.bottom {
background-color:blue;
height: 50%;
}
</style>
</head>

<body>

	<div class="top">top</div>

<div class="outer">
	
	<div class="center">Center</div>
	
</div>

	<div class="bottom">bottom</div>
</body>
</html>