Member Avatar for autocrat

Yep, the title is right!

All I want is a method for getting IE to display 2 divs in a row, the l/r to be 200px wide, the center fluid.

The only stipulations are that all three stretch to 100%, (usually easy in IE), and that the HTML order is L C R.....
so floating seems off in this case!

Please assist.... I'm sick to death of non-compliant browsers and far-fetched layouts.... I've got a layout working in NN6+ and MFF 1.1+..... all I need is one for IE, and if I have to use a seperate/different CSS sheet, then stuff it, I will!

  • 4 Contributors
  • 4 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DianeD
Member Avatar for tgreer

I'm not quite sure I understand. Does my 3-column layout at www.tgreer.com match your criteria?

Member Avatar for Dani 
<div id="main">
 
	 <div id="left" style="float:left; width:200px">
 
	 </div>
 
	 <div id="right" style="float:right; width:200px">
 
	 </div>
 
	 <div id="center">
 
	 </div>
 
</div>
Member Avatar for autocrat

Sorry, obviously I typed out so fast I failed to put enough details in!

I require a 3 column layout......
*strict xhtml
*header & footer seperate from the content block with the 3 cols.
*each column must stretch vertically to match the longest column.
*the left and right columns need to be of fixed width.
*the central column needs to be fluid.
*the html / source order needs to be Left Center Right

I only need this for IE, as I have a decent copy for other browsers... I just seem unable to get this running right in strict xhtml for IE.

Hope that makes more sense.

Member Avatar for DianeD

Does this help you?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!-- left column -->
<div id="lh-col"><br />

</div>
<!-- end of left column -->
<!-- center column -->
<div id="c-col">

</div>
<!-- end of center column -->
<!-- right column -->
<div id="rh-col"><br />

</div>
<!-- end of right column -->

</body>
</html>

The CSS layout:

body{
margin: 0; padding:0;
background: #808080; color: #333333;
}

#lh-col{
position: absolute;
top: 20px;
left: 20px;
width: 180px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px;
z-index: 2;
}

#rh-col{
position: absolute;
top: 20px;
right: 20px;
width: 180px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
}

#c-col{
position: relative;
margin: 20px 201px 20px 201px;
border: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
}

DianeD

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.