Forum Moderators: not2easy
Except I ran into a problem.
I was doing something weird with a lot of the pages where there would be a two-column layout without tables, but it was using span tags. Firefox did not like this, as I'm sure it was an ugly hack, even for IE. So now I'm trying to fix it with the use of floated div tags, and it's working beautifully in The Good One... but not so much in IE.
See, the page is basically split into four columns: it's bisected, then each of those halves are split, so you've got something like this going on:
Key: Value ¦ Key: Value
Key: Value ¦ Key: Value
There are two columns for the keys, and two columns for the values. Code-wise, I've got a div for the left side (the first Key: Value pair) and a div for the right side, then inside each div I have another set of divs: one for the key, and one for the value.
My problem is that IE is taking the second "Key" div and expanding it past what it should, which squishes the second "Value" div too much and makes the page look unsightly. I want each "Key" div to be 40% of its half of the page, but somehow IE makes the second "Key" div 40% of the whole layout, which is why it's squishing its "Value" div.
If this has boggled anyone, here's some example code. I'm glad (and yet... not) that I could recreate this at home with some stub code and produce the same effects as I'm seeing at work.
<html>
<head>
<style>
#container
{
width: 100%;
}#left-column
{
float: left;
width: 50%;
border: 1px solid red;
}#right-column
{
margin-left: 50%;
padding-left: 1em;
border: 1px solid blue;
}#left-col-left
{
float: left;
width: 40%;
border: 1px solid green;
}#left-col-right
{
margin-left: 40%;
padding-left: 1em;
border: 1px solid orange;
}#right-col-left
{
float: left;
width: 40%;
border: 1px solid black;
}#right-col-right
{
margin-left: 40%;
padding-left: 1em;
border: 1px solid purple;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
This text is in the left column.
<br>
<div id="left-col-left">
Left column, left side
</div>
<div id="left-col-right">
Left column, right side
</div>
</div>
<div id="right-column">
This text is in the right column.
<br>
<div id="right-col-left">
Right column, left side
</div>
<div id="right-col-right">
Right column, right side
</div>
</div>
</div>
</body>
</html>
Any help would be appreciated. As I was typing this, I wondered about the effects of a four-column layout in which each div had its margin set just past the last div, so instead of having two large divs, then dividing those again, I'd have each div placed next to the other, from left to right. Would that work, though? I've never seen a four-column layout like that; only three columns where one of them is float: right, and that's not really what I'm looking for.
you're coming across one of IE's problems in that it cannot work out the width of an element which is implicitly given a width by margining alone.
That right column doesn't (according to IE) know that it's only (approx) 50% wide, at least not for the purposes of passing on width to child elements. The usual fix for this would to be explicitly apply a width or height (layout hack) to it.
A "layout hack" [webmasterworld.com] forces IE to do lots of things properly.
However, in this case if you were just to use this (and you can) you will trigger another "real" IE Float Bug The 3px gap between the floated left column and the static right column. This may not be a problem if you're not worried about "pixel perfection" gaps between your columns. But if it is there is a fix for this too or sometimes I might be inclined to float everything.
The problems will apply to both the main two columns then the internal two columns they each contain.
fix no.1 is relatively if you can use a width, which could go in the main CSS (wouldn't need hacked in). But on your right columns this is not very practical, at least in this example because of the borders and padding it's kinda impossible to know what percentage width those right columns would be.
But you can give IE a fictitious height ~ any small height will do , even 0! ~ because IE will stretch the height. Others won't stretch, they will overflow the container, which is why it has to go to IE only.
<!--[if IE]>
<style type="text/css" media="screen">
#right-column {height: 1%;}
</style>
<![endif]-->
(you could hack the CSS into your main stylesheet if preferred, rather than use a conditional comment.)
That will fix part one, but you will then see the 3px gap between your columns.. like I said this may not be a huge problem for you, but if it is this can be worked around too, in this case quite easily also :) just add a negative right margin , -3px, to the left columns.. again for IE only
<!--[if IE]>
<style type="text/css" media="screen">
#right-column {height: 1%;}
#left-column {margin-right: -3px;}
</style>
<![endif]-->
there are other ways like floating everything to try and avoid IE's "layout" problems, the choice is yours.
Suzy
For the most part, your hacks worked. Adding a height element to the right column made the float behave properly in IE. And in this case, the 3px jog created using this does not really affect me. But I went ahead and tried to fix it anyway, adding a
margin-right: -3px
to the #left-column div as suggested in your post. This did not seem to do anything in IE (and I realized originally that I should have noted I'm using IE 6 here, and could care less about any older version).
glad it worked I should have also said that this 3px fix would only work in IE strict mode. it can be fixed for older versions (and quirks mode) too but it's a bit more complicated
btw if you're not bothered about older IE versions I would suggest changing to a strict mode Doctype, this is not necessarily a strict doctype it can be transitional but it is a full Doctype with the url and without the <xml declaration>..
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
this would avoid throwing IE into quirks mode and makes it act a little more like compliant browsers.. then other things like centering using margin: 0 auto will work too..
Suzy
