Alternative to float: left

Could we get the complete picture?

Thanx for the fast reply and sorry my words didn't make sense to you.
Here's another try.

The little piece of code (which is a stripped down version of the whole layout, so you don't have to search tons of code) displays like this on windows (ie6):

testdatatestdatatestdata

On a macintosh (ie5) it displays as

testdata
testdata
testdata

Now, I want it the mac to display it as it's displayed on a windows machine.
My guess is, the mac handles float: left; different, though I wouldn't know how to do this otherwise. To be honest, it feels like float: left; isn't a very nice way of doing this 'columnlike' displaying on windows either. But currently I'm a bit lost to which browser does what with a line of csscode...
Hope the picture is more complete now.

Haha, I had the same problem a few months ago... you'd think that three float: left declarations would work like a charm, but alas, they don't.

Go to 37signals.com, they have a good example of exactly how to do a good three column layout right on their front page.

Borrow float code as needed

-Mike

Yeah I got most of that but was interested if it was something else in the CSS that was the problem - since to me (who doesn't own a Mac) that should work. Still DJS has the best idea...

Another way to do 3 columns - using absolute positioning for the left and right columns and setting the margin for the middle column:

#container {
podition: relative;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 180px;
}
#middle {
margin: 0px 180px 0px 180px;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 180px;
}

...

<div id="container">
  <div id="left">
  </div>
  <div id="middle">
  </div>
  <div id="right">
  </div>
</div>

Keep in mind that if you use absolute positioning and have elements above the 3 columns (like a header bar) you will need to account for the messed up way that IE deals with margins & padding on the box model.

For this 3-column layout ( http://mx.coldstorageonline.com/layout/ ) I had to use positioning for the side columns. However IE was rendering them 5 pixels too high, even though everything else was putting them where it should be.

Solution? Take advantage of the fact that IE doesn't know jack about selectors and override the position for browsers that do follow standards. In my example, the correct top value was supposed to be 85, but IE needed 90 px to render correct. Enter the selectors:

#navin{
    float: right; 
    width: 200px; 
    z-index: 20; 
    position: absolute; 
    top: 90px; 
    right: 21px;
}
/* let real browsers know where it goes */
#container>#navin{
    top: 85px;
}

Also, when dealing with floated elements, keep in mind that they have no height to them as far as the container is concerned, so either compensate for that in your container, or make a spacer element that will force to a minimum height, or have at least 1 non-floated element in your equation (probably the tallest one)...

FYI, the problems exorcyze describes above with Internet Explorer refer to IE 5.*.

IE6 uses the correct box model when you supply a valid doctype, as the linked-to page does.

Hmmmm. I would've sworn you were correct with that, but I had it still happening in IE 6, which is why I was baffled by it. If I remove the declaration setting the top to 85px then IE will display the side bars 5px higher than the Gecko and Presto (Mozilla et al, Opera) rendering engines...

The only thing I could think of was the 5.5 bug with the padding margins, so I used the same trick to get around it and it worked...

Thoughts?

After finishing a nice layout with 3 divs in a line, which display nicely next to each other, I opened a browser on a mac...
Well, I saw 3 divs, only this time they were below each other. Seems like the float argument is interpreted different on a mac (ie 5). Did I overlook something?

<div id="row_1">
<div style="float:left;">testdata</div>
<div style="float:left;">testdata</div>
<div style="float:left;">testdata</div>

I've had little difficulty on IE 5.1.6 for Mac when I've included a width in the CSS:

#left { width : 33%; float : left; }
#center { width : 33%; float : left; }
#right { width : 33%; float : left }

Letting the widths add up to 100% caused me to have to scroll sideways just a little bit; using a total of 99% fixed that. I also had a problem similar to yours (a division dropping down) using two columns at 50% each. Adjusting one of the column divisions to 49% took care of it nicely.

I'm new at this and haven't tested this on non-Mac browsers, but from what you're already telling us, that should be OK.