Member Avatar for hollystyles

Hi all,

I'm trying to create a three column CSS based HTML template.
Here's the XHTML: TriCol_Liq.htm

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tripple Column Layout Liquid</title>
<link rel="stylesheet" type="text/css" href="TriCol_liq.css" />
</head>
<body>
<!--START PAGE CONTAINER -->
<div class="container">
<!--START HEADER -->
<div class="header">
HEADER
</div>
<!--END HEADER -->

<!--START LEFT COLUMN -->
<div class="left">
LEFT
</div>
<!--END LEFT COLUMN -->

<!--START CENTER COLUMN-->
<div class="center">

<div class="center_content">
CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER
 CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER
  CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER
</div>
  </div>
<!--START PENTER COLUMN -->

<!--START RIGHT COLUMN -->
<div class="right">
RIGHT
</div>
<!--END RIGHT COLUMN -->

<!--END PAGE CONTAINER -->
</div>

</body>
</html>

and here's the CSS: TriCol_Liq.css

body{
margin: 0px 0px 0px 0px;
background-color: #ffcc66 ;
}

div.container{
width: 100%;
}

div.header{
position: absolute;
width: 100%;
height: 100px;
top: 0px;
left: 0px;
background-color: #ffcc66;
}

div.left{
position: absolute;
width: 160px;
height: 400px;
top:100px;
left: 0px;
background-color: #ffff33;
}

div.center{
position: absolute;
height: 400px;
top: 100px;
left: 160px;
right: 160px;
background-color: #ffff66;
}

div.center_content{
padding: 25px 25px 25px 25px;
}

div.right{
position: absolute;
width: 160px;
height: 400px;
top: 100px;
right: 0px;
background-color: #ffff99;
}

The centre div should be liquid and expand/contract to fill the space between the right and left div depending on the size of the users browser window. It displays perfectly in Firefox, but IE stuffs some padding in between the centre div and the right div element. Does anyone know how I can tweek my CSS to make IE play along?

  • 2 Contributors
  • 5 Replies
  • 109 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DaveSW

Recommended Answers

All 5 Replies

Member Avatar for DaveSW

on div.center change the absolute positioning to be margins

div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}

That should work.

IE doesn't support positioning from opposite sides.

Member Avatar for hollystyles

on div.center change the absolute positioning to be margins

div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}

That should work.

IE doesn't support positioning from opposite sides.

Cheers DaveSW that did the trick just had to increase height by 100px to 500 as it's no longer absolutely positioned.

Member Avatar for DaveSW

No problem, but in that case you might get a box model problem in moz/IE - check it out, if it appears as different heights let me know and I'll tell you how to fix it.

Member Avatar for hollystyles

No problem, but in that case you might get a box model problem in moz/IE - check it out, if it appears as different heights let me know and I'll tell you how to fix it.

Yes it does appear flush in IE but longer in mozilla at 500px.

Member Avatar for DaveSW

yeah what's happening is that IE subtracts margins and padding from the width, wheras the official box model (as used by Mozilla) adds them.

So what you need to do is nest two divs, i.e.
<div><div>

then apply your margin-top to the top one, and your height to the second one.

That then avoids the box model totally.

There are numerous hacks for getting IE to read one value and Moz the other, but there's no guarantee on their effectiveness with future browsers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.