4 replies [Last post]
lobos
Offline
newbie
New Zealand
Last seen: 17 years 12 weeks ago
New Zealand
Joined: 2003-07-07
Posts: 5
Points: 0

Hi there,

I have a 100% page with four floating divs at 25% each, this works in moz/firefox, etc but not ie6 (the float drops...) any ideas? They should be side by side...

<!-- center column -->				
<div style="width:100%;">
<!-- center row1 -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
Phasellus varius eleifend tellus. </div>
<!-- ///block -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<!-- ///block -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
Phasellus varius eleifend tellus. </div>
<!-- ///block -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
Phasellus varius eleifend tellus. </div>
<!-- ///block -->
<!-- ///center row1 -->
</div>
<!-- ///center column -->
		
<div class="clearing">&nbsp;</div>

<!-- footer -->
<div id="footer">

</div>
<!-- ///footer -->

Thanks

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 36 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

ie6 can't add up!!!

Omit the 100% width.
Change
<div style="width:100%;">
to
<div>

as on this page
http://www.stunicholls.myby.co.uk/layouts/body5.html

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

lobos
Offline
newbie
New Zealand
Last seen: 17 years 12 weeks ago
New Zealand
Joined: 2003-07-07
Posts: 5
Points: 0

ie6 can't add up!!!

Hi there,

Thanks, but I am not doing this with absolute positioning, just float left and I can't understand it... I have removed the width from the containing div but still no go... if I change one of the div widths to 24% it will fit, but I don't want to do this because it leaves a gap on the right side of the viewport. It's strange becuase it fits in all other browsers... man I am pulling my hair out!!!

<body style="margin:0px;">
<!-- center column -->				
<div>
<!-- center row1 -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
Phasellus varius eleifend tellus. </div>
<!-- ///block -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<!-- ///block -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
Phasellus varius eleifend tellus. </div>
<!-- ///block -->
<!-- block -->
<div style="float:left;width:25%;background:#eee;border:0px solid #999;border-top:5px solid #999;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
Phasellus varius eleifend tellus. </div>
<!-- ///block -->
<!-- ///center row1 -->
</div>
<!-- ///center column -->		
<div class="clearing">&nbsp;</div>
</body>

Thanks

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 36 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

ie6 can't add up!!!

Remove the float and width from the last div.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

lobos
Offline
newbie
New Zealand
Last seen: 17 years 12 weeks ago
New Zealand
Joined: 2003-07-07
Posts: 5
Points: 0

ie6 can't add up!!!

Thanks Stu,

But it didn't work Sad I ended up using a negative margin of -1px in the containing div and it worked a charm.

Geez the browser differences have really been getting me down today, many hours spent for nothing - almost enough to make one hurt one's self Sad LOL

Regards
Lobos