[CSS FF IE] 3 cols, top pic
Hi,
I'm trying to do a layout with a top section for title of page etc, and three columns.
I got it to work mostly in ff then tried ie and found that ie gave up with heights (which is useless).
Then I set the bottom section to 600px (not really what I wanted, but oh well).
IE seems to like it now (apart from a center problem which needed a second fix type. FF Now however appears to shoot past the end of the main area... Did I miss something?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'></META><META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'></META>
<title> ..: :.. </title>
<style type='text/css'>
<!--
/* Default stuff */
body {
color: #fff;
background: #000;
margin: 0;
padding: 0;
}
#allarea {
width: 800px;
height:100%;
margin: 0 auto;
border: solid 1px #fff;
}
#topsection {
border: solid 1px #ff0;
height: 120px;
}
#bottomsection {
border: solid 1px #0ff;
height: 600px;
}
#leftcol {
width: 200px;
height: 100%;
display: block;
float: left;
border: solid 1px #00f;
}
#rightcol {
width: 200px;
height: 100%;
display: block;
float: right;
border: solid 1px #0f0;
}
#midcol {
width: 390px;
height: 100%;
margin: 0 auto;
display: block;
border: solid 1px #f00;
}
/* General classes */
.iefixcenter { text-align: center; }
.iefixheight { height: 100%; }
-->
</style>
</head>
<body>
<div class='iefixcenter'>
<div id='allarea'>
<div id='topsection'>
<!-- end of top section -->
</div>
<div id='bottomsection'>
<div id='leftcol'>
</div>
<div id='rightcol'>
</div>
<div class='iefixcenter iefixheight'>
<div id='midcol'>
</div>
</div>
<!-- end of bottom section -->
</div>
<!-- end of all -->
</div>
</div>
</body>
</html>
Edit: Updated this a little, and it seems to work correctly now. Weird. Any comments on the layout so far?
Vince
