Jens said:
Hello world,
I play around with a table based layout
(
http://www.photoss.de/test/layout-table.htm). It works perfectly with
Firefox, but shows some problems with Internet Explorer 6 which are
described on the webpage.
First, I would like to make the layout work for both Firefox and IE6.
Second, I have heard that CSS based layouts should be preferred over
table based ones. I tried to create a CSS based layout that looks the
same and behaves in the same way. I tried a number of approaches that I
found on the web, but up to now I couldn't find a CSS solution that
really look and behaves like the table.
Maybe someone can give me some hints that push me in the right direction?
Regards, Jens
How about something like this, it renders the same in my IE 6, Netscape
7.2, Firefox 1.0.1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Table Layout</title>
<style type="text/css">
body{
background-color: #000000;
padding: 0;
margin: 0;
border: 0;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
width: 100%;
}
..wrapper{
margin: 0;
padding: 0;
border: 5px solid #000000;
background-color: #CCCCCC;
}
..left{
float: left;
background-color: #CCCCCC;
width: 120px;
padding: 5px;
}
..top{
margin: 0 0 0 130px;
background-color: #999999;
padding: 5px;
text-align: right;
}
..main{
margin: 0 0 0 130px;
background-color: #FFFFCC;
padding: 5px;
border-top: 5px solid #000000;
border-right: 0px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
..bottom{
margin: 0 0 0 130px;
background-color: #999999;
padding: 5px;
text-align: right;
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='left'>
<b>LEFT:</b><br>
This area goes from the top to the bottom of the main area with a
fixed width of 120px.<br><br>
Its height is automatically increased when its contents don't
fit.<br><br>
The height is also automatically increased or when the height of the
MAIN area increases.
</div><!-- left -->
<div class='top'>
<b>TOP:</b> Fixed height of 30px, increases if contents do not fit.
</div><!-- top -->
<div class='main'>
<b>MAIN:</b><br>
This area has a fixed width.
The height increases when its contents do not fit.<br>
The height is also automatically increased or when the height of
the left area increases.<br>
<br><b>Problems:</b><br><br>
1. The layout works for Firefox, but not for Internet Explorer 6:<br>
a) TOP and BOTTOM areas have too much height.<br>
b) IE6 adjusts the TOP height according to how much content is in
the LEFT area.<br>
<br>2. I'd like to get the same layout with DIV and CSS formatting
instead of a table.
</div><!-- main -->
<div class='bottom'>
<b>BOTTOM:</b> Fixed height of 30px, increases if contents do not fit.
</div><!-- bottom -->
</div><!-- wrapper -->
</body>
</html>
