Floating DIV issue in IE6 (Won't stay in position)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Floating DIV issue in IE6 (Won't stay in position)

Post by Chris Corbyn »

I'm having a problem getting floating divs in IE6 to stay where I want them. I have 4 div's, all set to 25% width, all floating left (It should look like 4 equally spaced boxes in a row).

In FF it works great. In IE (surprise) it breaks intermittently, (usually on page refresh or window resize). What happens is that all the <div> elements shift about and drop down to the next row or fall against the right hand margin etc. Anyone else had similar issues? (I hope they have the box model sorted in IE7).

Code: Select all

<style type="text/css">
body
{
  padding: 0;
  margin: 0;
}
.floating
{
  width: 25%;
  height: 100px;
  float: left;
}
</style>
</head>
<body>
<div class="floating" style="background: #FF0000;">&nbsp;</div>
<div class="floating" style="background: #00FF00;">&nbsp;</div>
<div class="floating" style="background: #0000FF;">&nbsp;</div>
<div class="floating" style="background: #FFFF00;">&nbsp;</div>
</body>
See it here: http://www.w3style.co.uk/css_bug.html

If you open it in FF and resize the window over and over it's fine. Do it IE and it breaks (??!!!). It gets worse and worse once you start stacking them up (with clearing divs between it still breaks).

Any clues?

Cheers, d11
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

That is pretty interesting. Although they never right aligned, the last div did break down to the next line. Perhaps something like this would provide a temporary solution:

Code: Select all

<div style="width: 99%;">
	<div class="floating" style="background: #FF0000;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00;">&nbsp;</div>
</div>
Although there is that extra 1%.

Edit: that code above still breaks when you resize to certain positions.

This doesn't break:

Code: Select all

<div class="floating" style="background: #FF0000; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00; width: 24%;">&nbsp;</div>
but you still deal with the left over 1 % :P

Or this will work correctly, but I heard you're not supposed to use tables for structure. I don't know why though. Someone please inform me =)

Code: Select all

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="25%">
	<div class="floating" style="background: #FF0000; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #00FF00; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #0000FF; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #FFFF00; width: 100%;">&nbsp;</div></td>
</tr>
</table>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

scrotaye wrote:That is pretty interesting. Although they never right aligned, the last div did break down to the next line. Perhaps something like this would provide a temporary solution:

Code: Select all

<div style="width: 99%;">
	<div class="floating" style="background: #FF0000;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00;">&nbsp;</div>
</div>
Although there is that extra 1%.

Edit: that code above still breaks when you resize to certain positions.

This doesn't break:

Code: Select all

<div class="floating" style="background: #FF0000; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00; width: 24%;">&nbsp;</div>
but you still deal with the left over 1 % :P

Or this will work correctly, but I heard you're not supposed to use tables for structure. I don't know why though. Someone please inform me =)

Code: Select all

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="25%">
	<div class="floating" style="background: #FF0000; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #00FF00; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #0000FF; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #FFFF00; width: 100%;">&nbsp;</div></td>
</tr>
</table>
Thanks. I tried knocking of a portion of the width previously (I've been stumped by this for weeks but had more important things to do). It works as you say but getting down to 800x600 we see the same behaviour again :(

Using tables is bad since the HTML source appears in a somewhat random order and screen readers have a really difficult time reading through it. Div's and CSS are the way to go ;)

Thanks though :)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

This width property of divs is great crazy stuff. I also had problems earlier.
as scrotaye was saying, all the divs added together to 100% never gets aligned properly.
somewhere extra space around 1% comes in which makes the last div come down.
may be position: absolute and left:xvalue might help to put divs in place.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

scrotaye wrote:Or this will work correctly, but I heard you're not supposed to use tables for structure. I don't know why though. Someone please inform me =)
Sure.

For cellphones, mobile browsers, visually impared users, and people using screen readers, tables can be particularly difficult to render/view. They don't scale well, they are difficult to 'hear', and they are rarely designed to linearize properly.

In a nutshell, they are being used for the wrong thing. Tables are for presenting tabular data. A calendar is a good example of what you should use tables for. For layout, you should use css.

The Web accessibility guidelines does a good job of explaining some of the reasoning and workarounds:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post by Skittlewidth »

I read somewhere (in SitePoint's HTML Utopia: Desiging without Tables Using CSS most likely) about setting widths to 99.9% because in some browsers the horizontal scrollbar displays as soon as the width equals 100% instead of anything over 100%. I wonder if that would also solve the problem with the divs. 99.9% is hard to distinguish from 100% with the naked eye, although its pretty awkward to split up into equal segments unless you like working in 3s or 9s I guess! 8O
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

back when I was first learning HTML a few years ago, I was unaware CSS even existed. I just learned the bare basics HTML, then starting putting things in tables and calling them layouts. Which is still what I do. =/. I guess I will have to learn to transition.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Re: Floating DIV issue in IE6 (Won't stay in position)

Post by wwwapu »

d11wtq wrote:(I hope they have the box model sorted in IE7).
I have my doubts, but even if they did, it would take at least couple more years to safely assume that IE6 is such a minor problem that there is no need to take it into consideration.
scrotaye wrote: I guess I will have to learn to transition.
Yes please. Not only because it makes web a better place, but playing with CSS is a fun and healthy hobby :wink:
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Meh, I guess my viewpoint is if you tried to follow as many of the w3c guidelines as possible, you'll end up with a truly boring looking page.. much like the w3c site itself.

I guess its just a matter of your target audience. Pleasing 98% of your visitors is better than struggling to produce interesting pages for the minority viewers.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post by Nathaniel »

When using CSS, I usuall run into the pleasing 80% of my viewers problem... I develop in Firefox, and then find that my standards-compliant CSS fails miserably in IE. So I have to add hacks to get it to work in the world's most popular (read: crappy) browser.
ody
Forum Contributor
Posts: 147
Joined: Sat Mar 27, 2004 4:42 am
Location: ManchesterUK

Post by ody »

This is interesting, the developer I have at work (I was sure he was stalling for beer time with the lads) was putting this problem off with excuses that it was an "IE" problem, turns out he wasn't lying! Anyway, if someone can come up with a way to infiltrate MS and pose as an IE developer and fix there bloody box model I will buy them a pint.

word.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

ody wrote:This is interesting, the developer I have at work (I was sure he was stalling for beer time with the lads) was putting this problem off with excuses that it was an "IE" problem, turns out he wasn't lying! Anyway, if someone can come up with a way to infiltrate MS and pose as an IE developer and fix there bloody box model I will buy them a pint.

word.
I wonder which developer that might be :P
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

scrotaye wrote:Meh, I guess my viewpoint is if you tried to follow as many of the w3c guidelines as possible, you'll end up with a truly boring looking page.. much like the w3c site itself.

I guess its just a matter of your target audience. Pleasing 98% of your visitors is better than struggling to produce interesting pages for the minority viewers.
Absolutely not!

Check out: http://www.csszengarden.com/

Its a collection of images and css files, that transform *one* html page. All of them are html-compliant, all of them are css-compliant, and most of them are accessibility-compliant as well. They are in no way "Boring", and show just how much is possible if you put your mind to it. Compliant and accessible sites can be extremely interesting - more so than most pages.

Compliance doesn't limit you to boring by any stretch - only your own imagination is. But if you start by saying "My site will be boring if I...", it will be.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

This is great too: http://www.ryanbrill.com/ (A List Apart)
Fourtet
Forum Commoner
Posts: 29
Joined: Fri Sep 02, 2005 5:55 pm

Post by Fourtet »

This is interesting, the developer I have at work (I was sure he was stalling for beer time with the lads) was putting this problem off with excuses that it was an "IE" problem, turns out he wasn't lying! Anyway, if someone can come up with a way to infiltrate MS and pose as an IE developer and fix there bloody box model I will buy them a pint.

word.
The "word" at the end just finished it off nicely. :lol:
Meh, I guess my viewpoint is if you tried to follow as many of the w3c guidelines as possible, you'll end up with a truly boring looking page.. much like the w3c site itself.

I guess its just a matter of your target audience. Pleasing 98% of your visitors is better than struggling to produce interesting pages for the minority viewers.
Very misguided there, w3c are not designers that's for sure - but your viewpoint is utter bunkum. A talented CSS/HTML/JavaScript coder can produce interactive experiences as mouth-watering as someone working with Flash MX could. The great thing about it is that not many people have the talent to do that. It separates the men from the boys so to speak. :)
Post Reply