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
  • 129 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DianeD

Dani AI

Generated

Short answer for : for IE-only and strict XHTML the most reliable, low-friction options are (A) a faux-column background on the content wrapper, or (B) a tiny IE-only script that equalizes the three column heights at runtime. ’s float idea and ’s absolute-position approach both point toward those trade-offs: floats keep source order but still need a way to force equal heights; absolute positioning can “look right” but usually requires fixed heights or awkward z-index workarounds.

Recommended approaches, pros/cons and tips

  • Faux columns (visual background): give the wrapper a vertically tiled image that paints 200px color bands at left and right and a transparent middle. The markup stays Left Center Right, you get perfect visual equal heights, and header/footer remain separate. Drawback: the look is baked into the image and you must recreate it for different colors/widths.

  • CSS table/flex (modern IE): if you can target IE8+ or modern browsers, display:table/table-cell or flexbox gives true equal column heights without JS. Not an option for very old IE6/7.

  • Small IE-only JS equalizer: easiest when you must support older IE and strict XHTML. Run once on load (and on resize), measure the three column heights, set all three to the max. Put this script and any IE-only CSS inside conditional comments so other browsers keep your existing working stylesheet.

Example equalizer (run after content/images load):

<script type="text/javascript">
(function(){
  function equalize(){
    var ids = ['left','center','right'], max = 0, i, el;
    for(i=0;i<ids.length;i++){ el=document.getElementById(ids[i]); if(el) max = Math.max(max, el.offsetHeight); }
    for(i=0;i<ids.length;i++){ el=document.getElementById(ids[i]); if(el) el.style.height = max + 'px'; }
  }
  if(window.attachEvent) window.attachEvent('onload', equalize); else window.addEventListener('load', equalize, false);
  window.onresize = equalize;
})();
</script>

Notes: run after images/content are loaded, use conditional comments to target IE, and for IE6/7 you may need an IE-specific “hasLayout” fix (for example zoom:1) on the container so height assignments behave predictably. For a pure visual result with the least markup-change, go faux-columns; for content-driven equal heights, use the JS equalizer.

Recommended Answers

All 4 Replies

Member Avatar for tgreer

I'm not quite sure I understand. Does my 3-column layout at 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.