How to get divs to line up in ie6

pulling my hair, nails, teeth and eyes out

[palgrave]

Hi all.

I have a serious problem with ie6 and width. I am designing a site that is 3 col liquid layout: full width header, 200px left col, 200px right col and content in the middle.

It all works very well until I try to put divs in the content column and view them in ie6.

In one page, I want a div called description to take up no more than 30% of the content width, with an image beside it. ie6, as we all know, doesn't understand how to limit the width to 30%. I have spent all day googling, reading forums, reading css articles, reading javascript articles all to no avail. How the hell do I make this div 30%, and no more than 30%?

Secondly, on the contact page: the company in question has 3 offices. I want the three addresses beside each other inside the content div, much like this

<tr>
 <td>address1</td>
 <td>address2</td>
 <td>address3</td>
</tr>

would achieve.

I am sorely tempted to throw standards out the window and use the lightweight code above!

[Milamber]

what doctype are you using? Odds are IE6 is in quirks mode.

[Xapti]

That may be. Another possibility is that it's not taking 30% of the proper container you want.
Here's some info on the definition of containing block, and how it's used:
[w3.org...]
[w3.org...]

So you want to make sure that the block that you want 30% width of is the FIRST container it encounters (it's parent), UNLESS it is positioned absolutely, in which case you need to make your parent div position:relative (no coordinates necessary) to make it be the containing block.

For your second problem, here's something you can do:
Use the <address> tag for each location, and in the CSS specify address{float:left;
width:33.33%;/*optional*/
height:?em /*optional*/}
the optional attributes would most likely be used if you wanted to style a border or background color on them, so that they all appear quite uniform.

There's really nothing much wrong with using tables there either though, in my opinion. Some people would complain that it's not tabular data so tables shouldn't be used. While I greatly dislike using tables for presentational layout, for something really simple like this it's fine.
While I have no problem with it, I still wouldn't bother using it unless I had specific visual design goals, since the CSS method is still lighter HTML, and uses the address tag while it's at it (granted you could wrap the table cells in the tag too, but makes for more markup))

[edited by: Xapti at 7:16 pm (utc) on July 4, 2007]

[palgrave]

Thanks guys. I am using xhtml 1.0 strict and viewing it in virtual pc (xp pro sp2 with ie6).

I hadn't thought of using the address tag. Remember reading about it in an article entitled something like "the most useful under-used html tags".

I'll give it a bash now and report back.

Thanks for the info.

[londrum]

address tag would be best, because that's the proper tag. but you could also do it with a definition list. that has the advantage of being one single block, with three things inside it (which you can float, so they sit side by side)

<dl>
<dt>Our company addresses:</dt>
<dd>Address number one... blah blah blah</dd>
<dd>Address number two... blah blah blah</dd>
<dd>Address number three... blah blah blah</dd>
<dl>

(and it is okay to have multiple <dd>s - i checked!)

[palgrave]

Back again. Had a go at using <address>. Works very well in FF and IE7, but doesn't float at all in IE6. The three addresses are in a vertical line. I tried to include display: inline, but it made no difference.

[palgrave]

SORTED! Use display: inline without float: left. You have no idea how happy I am with that!

Now on to problem one. See you in a minute!

[palgrave]

Sorry londrum. So excited I didn't see your post. I haven't actually heard of <dl>. I am sticking with <address> because, as you say it is the proper tag to use, however I will check out what a <dl> is when I get a chance.

BTW, this is a pretty good forum. I think I might hang around for a while!

[palgrave]

No joy with the 30% div beside the picture. Making the containing div position: relative had no effect.

Is this not something to do with ie6 not recognising max-width? Do I not need to use some scripting here?

[Xapti]

IE does not recognize max width, no. I didn't understand exactly what you wanted, I thought you might have just wanted an exact size of 30%.

To get IE to support it, you can use javascript like minmax.js or ie7.js.

Another option which isn't very great, but you might consider, is having it always 30% width, but having a div around it with overflow:auto, so that if an item is larger than that width, it will scroll. Will not work with small items though like text, or small images, since they will wrap to new lines.

And with the address floating, that's really strange behaviour. IE6 is so buggy. The issue you will have with display:inline is that it can only be 1 line... typically addresses and/or contact info is 3-5 lines high, which you can't do as inline styled unless you want them on top of each other.
Javascript could probably fix the problem for IE, but I've never heard of the fix, or even the problem, so it might take searching, or D.I.Y.

Another fix would be to wrap each address in a div, and have the divs to float.

[edited by: Xapti at 1:47 am (utc) on July 5, 2007]

[palgrave]

Thanks Xapti. Regarding the 30% width thing, I do want it to be constantly 30%. The problem I have is that IE6 treats {width: 30%} the same way as any other browser treats {min-width: 30%}. In other words, it lets it get bigger than 30%. I used the method you described in your earlier post - giving the containing div a position - but it didn't work. IE6 just opened up the contained div.

Regarding the <address>, using display: inline works in IE6, even though they are 5 and 6 lines each. Don't ask me!

[londrum]

what you could do, is make that div stretch to 100% -- but include right-padding of 70%. that will make the content always fill up the 30% you want.
to make the image sit next to it, all you have to do is position it absolutely (position:absolute) on top of the 70% padding.
(...remember that when you position something absolutely it takes it's measurements from the containing block that it's sitting in, rather than the entire screen)

[palgrave]

Doesn't work in ie6 unfortunately.

[londrum]

what happens with it? does it stretch out to 100% of the screen width (producing a horizontal scrollbar) rather than 100% of the containing block?

[palgrave]

Exactly.

[palgrave]

Found this

width: expression(this.offsetWidth>130?132:'');

Not perfect, because if IE6 is used to view the page through a resolution higher than 1024x768 there is a lot of whitespace. I tried to incorporate an expression that takes into account document.body.clientWidth but couldn't get anywhere with it.

[Xapti]

Like I said, one option may be that you can now try max-width:30%, And adding javascript for IE to support that feature.