9 replies [Last post]
Mossie
Offline
newbie
Hilversum, Netherlands
Last seen: 16 years 8 weeks ago
Hilversum, Netherlands
Joined: 2003-07-25
Posts: 5
Points: 0

Hi,

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? Or is there an alternative way for the mac? Or is there a far better way to display 3 divs adjacent to one another in the first place?

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

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Alternative to float: left

Could we get the complete picture?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Mossie
Offline
newbie
Hilversum, Netherlands
Last seen: 16 years 8 weeks ago
Hilversum, Netherlands
Joined: 2003-07-25
Posts: 5
Points: 0

More info?

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.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 26 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Alternative to float: left

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 Wink

-Mike

</twocents>

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Alternative to float: left

Yeah I got most of that Wink 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...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 19 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Alternative to float: left

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>

A Pedant Writes...
Into the mountain,
I will fall.

exorcyze
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2003-07-30
Posts: 18
Points: 0

Alternative to float: left

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;
}

Smile

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)...

Smile

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 19 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Alternative to float: left

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. Smile

A Pedant Writes...
Into the mountain,
I will fall.

exorcyze
Offline
Regular
Last seen: 16 years 7 weeks ago
Joined: 2003-07-30
Posts: 18
Points: 0

Alternative to float: left

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?

casey
casey's picture
Offline
Regular
Wisconsin, USA
Last seen: 5 years 20 weeks ago
Wisconsin, USA
Timezone: GMT-5
Joined: 2003-08-01
Posts: 17
Points: 0

Re: Alternative to float: left

Mossie wrote:
Hi,

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.