Convert table to CSS

Frogger · #1 (**permalink**) 07-26-09, 03:20 AM

Hi,
I am slowly teaching myself CSS but can not work out if it is possible to convert the below page layout I have created using tables into CSS layoit. Is it possible as its doing my head in trying to work it out.

Code:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="50%" bgcolor="red">&nbsp;</td>
  </tr>
  <tr>
    <td height="600" bgcolor="black">&nbsp;</td>
  </tr>
  <tr>
    <td height="50%" bgcolor="blue">&nbsp;</td>
  </tr>
</table>

I basically want the middle to be 600px high and the top and bottom of the page will grow to the size of the browser. The width will be 100%.
Any ideas and is it possible?

wirehopper · #2 (**permalink**) 07-26-09, 09:27 AM

HTML Code:

<html>
<head>
<title>div test</title>
<style type="text/css">
body
{
width:800px;
height:600px;
padding:0;
margin:0 auto;
color:#fff;
}
.outer
{
width:800px;
height:600px;
}
.left,.center,.right
{
float:left;
}
.left
{
height:50%;
width:25%;
background-color:red;
}
.center
{
height:100%;
width:50%;
background-color:black;
}
.right
{
height:50%;
width:25%;
background-color:blue;
}
</style>
</head>
<body>
<div class="outer">
	<div class="left">Left</div>
	<div class="center">Center</div>
	<div class="right">Right</div>
</div>
</body>
</html>

Tested with IE7, FF3

Frogger · #3 (**permalink**) 07-26-09, 04:35 PM

Thanks wirehopper for getting back to me.
Your script ran vertically. I am trying to get the CSS to run horizontal so that the black part (middle) stays at 600px high and the top (red) and bottom (blue) grow in height depending on how big the browser is sized. I have attached image to display how tables get this to work.
Any ideas are much appreciated.

wirehopper · #4 (**permalink**) 07-26-09, 08:18 PM

Sorry - I didn't see all the <tr> tags.

You might want to check min-height and max-height for the top and bottom, to give you some adjustment space. I'm not sure it is possible.

You may also be able to use javascript to adjust the div dimensions at page load. Check out the window.screenX property (spelling might be off, go to w3schools.com).

wirehopper · #5 (**permalink**) 07-27-09, 06:44 AM

HTML Code:

<html>
<head>
<title>div test</title>
<style type="text/css">
body
{
padding:0;
margin:0 auto;
color:#fff;
}
.outer
{
width:100%;
}
.left
{
background-color:red;
}
.center
{
vertical-align:middle;
height:600px;
background-color:black;
}
.right
{
background-color:blue;
}
</style>
</head>
<body>
<div class="outer">
	<div class="left">Left<br />And a bit more ...</div>
	<div class="center">Center</div>
	<div class="right">Right<br />And a bit more ...</div>
</div>
</body>
</html>

Frogger · #6 (**permalink**) 07-27-09, 04:46 PM

Hi wirehopper,
Thanks for your reply.
I had the same problem with my CSS code as you did.
For some reason with CSS it is hard to get the height at 100% or 50%.
ie the red and the blue rows dont stretch out to the height of the web browser like the table code does unfortunatley.

wirehopper · #7 (**permalink**) 07-27-09, 06:42 PM

You could also try a layered approach, with z-index.

Also - min-height is a good thing to try.

You could set the body background color to the same color as the bottom div - and have the bottom div background actually be transparent or none.

Hope these ideas help, good luck!

PS - Please post your solution.

advanceddesigns · #8 (**permalink**) 07-27-09, 09:46 PM

you need to set your div tags behind your main div. you should have 3 div tags then your main div tag. that should solve you problem

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>