PDA

Click to See Complete Forum and Search --> : [CSS FF IE] 3 cols, top pic

Ecniv
Nov 30th, 2004, 03:19 AM
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?


<!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
Ecniv
Nov 30th, 2004, 03:41 AM
(Version 0.9 - FF)

If I change the bottom section to:

#bottomsection {
width: 100%;
border: solid 1px #0ff;
/* height: 600px;*/
height: 100%;
/* padding: 0 0 16px 0;*/
/* overflow: auto;*/
}

It screws up the display (so far) in FF, appears to work ok in IE.


#bottomsection {
width: 100%;
border: solid 1px #0ff;
/* height: 600px;*/
height: 100%;
/* padding: 0 0 16px 0;*/
overflow: auto;
}

IE and FF are almost correct, except in FF the midcol seems be larger than it should be.
Yet if I do this:

#bottomsection {
width: 100%;
border: solid 1px #0ff;
/* height: 600px;*/
height: 100%;
padding: 0 0 16px 0;
overflow: auto;
}

It seems to render properly.

Hmmmm.

Did I do the layout too complicated?