[CSS FF IE] 3 cols, top pic

**Ecniv** · Nov 30th, 2004, 04: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?

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

**Ecniv** · Nov 30th, 2004, 04:41 AM

(Version 0.9 - FF)

If I change the bottom section to:

Code:

#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.

Code:

#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:

Code:

#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?

Thread: [CSS FF IE] 3 cols, top pic

Thread Tools

Display

[CSS FF IE] 3 cols, top pic

Posting Permissions