IE float problem

mark

I'm brushing up on my CSS, already running into problems with IE 6

The follow code should display two divs adjacent to each other within a
container. The problem is in IE6 the left div starts a row below the right
div. It appears that if I change the width of the container from 400px to
403px it will work, but 200+200=400 so why won't IE render then side by side
given there is enough room for them to fit?

<style type="text/css">

#container {
background-color: pink;
width: 400px;
}

#right {
float: right;
width:200px;
background-color: red;
}

#left {
width: 200px;
background-color: green;
}

</style>

<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>

Mar 3 '07 #1

Els

mark wrote:

I'm brushing up on my CSS, already running into problems with IE 6

The follow code should display two divs adjacent to each other within a
container. The problem is in IE6 the left div starts a row below the right
div. It appears that if I change the width of the container from 400px to
403px it will work, but 200+200=400 so why won't IE render then side by side
given there is enough room for them to fit?

Because IE6 gives an extra 3px space to the side of a float.
It's called the 3px jog bug:
http://www.positioniseverything.net/...reepxtest.html

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Jethro Tull - Thick As A Brick (Edit N°1)

Mar 3 '07 #2

Evertjan.

mark wrote on 03 mrt 2007 in comp.infosystems.www.authoring.stylesheets:

I'm brushing up on my CSS, already running into problems with IE 6

The follow code should display two divs adjacent to each other within
a container. The problem is in IE6 the left div starts a row below the
right div. It appears that if I change the width of the container from
400px to 403px it will work, but 200+200=400 so why won't IE render
then side by side given there is enough room for them to fit?

<style type="text/css">

#container {
background-color: pink;
width: 400px;
}

#right {
float: right;
width:200px;
background-color: red;
}

#left {
width: 200px;
background-color: green;
}

</style>

<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>

<style type="text/css">

#container {
background-color:pink;
width: 400px;
}

#right, #left {
float: right;
width:200px;
background-color:red;
}

#left {
background-color:green;color:white;
}

</style>

<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Mar 3 '07 #3

mark

"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

#right, #left {
float: right;
width:200px;
background-color:red;
}

that works! But can you please explain what you did and why? I can't really
figure out why align both divs to the right would fix it?

Mar 3 '07 #4

dorayme

In article <45e9c9a9.0@entanet>, "mark" <ma***@localhost.net>
wrote:

"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

#right, #left {
float: right;
width:200px;
background-color:red;
}

that works! But can you please explain what you did and why? I can't really
figure out why align both divs to the right would fix it?

Because in this case, IE does not do what Els pointed out. Floats
jam up against each other unless you do something special to stop
it.

IE is odd in adding 3px in situations where one box is floated
and another is not (at least officially floated with "float")

I think, but this may not be right, it was not a thoughtless
mistake or sheer unexpected consequence of anything on IE dev
team's part. The idea, I think, was to give some natural grace
(bit of padding) to text when a pic was floated.

The jog bit, referred to by Els, was, I reckon, unexpected. This
jog happens when a margin provision is made for a float. The text
next to the pic looks fine and justified on one side but when it
falls below the pic it then is not subject to the 3px gap any
more but is subject to the margin provision (acting like a
column). It is then justified 3px off the line of the text above.

The IE team may not have realised the use of floats for columns
was going to become a popular technique, I don't know.

--
dorayme

Mar 3 '07 #5

Evertjan.

dorayme wrote on 03 mrt 2007 in
comp.infosystems.www.authoring.stylesheets:

In article <45e9c9a9.0@entanet>, "mark" <ma***@localhost.net>
wrote:

>"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

#right, #left {
float: right;
width:200px;
background-color:red;
}

that works! But can you please explain what you did and why? I can't
really figure out why align both divs to the right would fix it?

Because in this case, IE does not do what Els pointed out. Floats
jam up against each other unless you do something special to stop
it.

IE is odd in adding 3px in situations where one box is floated
and another is not (at least officially floated with "float")

I think, but this may not be right, it was not a thoughtless
mistake or sheer unexpected consequence of anything on IE dev
team's part. The idea, I think, was to give some natural grace
(bit of padding) to text when a pic was floated.

The jog bit, referred to by Els, was, I reckon, unexpected. This
jog happens when a margin provision is made for a float. The text
next to the pic looks fine and justified on one side but when it
falls below the pic it then is not subject to the 3px gap any
more but is subject to the margin provision (acting like a
column). It is then justified 3px off the line of the text above.

The IE team may not have realised the use of floats for columns
was going to become a popular technique, I don't know.

That was a good answer for the "what", really "how".

Now for the "why":

Because the joy of working with clientside programming is never to expect
all browsers, and certainly IE to act as specified.

With some trial and error I long time ago came with just using floats.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Mar 3 '07 #6

Gus Richter

mark wrote:

"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

>#right, #left {
float: right;
width:200px;
background-color:red;
}

that works! But can you please explain what you did and why? I can't really
figure out why align both divs to the right would fix it?

Although this method works, it does present a problem for any subsequent
material since everything is floated, therefore I prefer this method:

<style type="text/css">

#container {
background-color: pink;
width: 400px;
}

#right {
float: right;
width:200px;
background-color: red;
}

#left {
margin-right: 200px;
background-color: green;
}

</style>

<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>

Or better yet (depending on the need), this one:

<style type="text/css">

#container {
background-color: pink;
width: 400px;
}

#left {
float:left;
width: 200px;
background-color: green;
}

#right {
margin-left:200px;
background-color: red;
}

</style>

<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>

--
Gus

Mar 3 '07 #7

VK

On Mar 4, 12:26 am, dorayme <doraymeRidT...@optusnet.com.auwrote:

The IE team may not have realised the use of floats for columns
was going to become a popular technique, I don't know.

No one realized it at that time. It is now like a shameful attitude to
remind but the motto for 4th versions of both rivals was "Now
developers can place each element on the page with pixel exact
precision!" and similar. What CSS was thought and made for is to make
HTML+CSS a free of charges and easy to use alternative to PDF and PDF-
generating software.
It was presumed that:

1) position=absolute will be the only way to position content blocks
on the page

2) position=relative will be occasionally used for rubies - not that
Ruby on rails but that one implemented on Netscape 4.x over <ilayer>
and on IE over <ruby><rt>: thus a small block displaced relatively
some main block and anchored to it.

3) font size will be given in px or pt, so absolutely positioned
container will have predefined width, so no problem to place them in
any desired order on the page.

4) float and clear will replace "align" and "clear" attributes for img
and br <img align="left/right"and <br clear="left/right/all">
There were no extra use presumed for them besides replacing the
mentioned attributes.

This is what was in mind while designing CSS layout capabilities. Now
by looking at any liquid layout - a.k.a. fluid layout - it is easy to
get amazed of the changes. Namely we have almost complete reversal of
tools usage. Whatever was intended to be the primary tool became a
rarely used auxiliary tool. Whatever was intended to be an occasional
helper became the main tool moreover used on elements it was never
thought to be used on.

P.S. Please do not answer with pros of div-based layouts. I'm neither
advocating tables nor God forbid! :-) criticizing div layouts. It is
nothing of rwar, only a historical note of why so many quirks were
found and still new are being found.

Mar 3 '07 #8

mark

"Gus Richter" <gu********@netscape.netwrote in message
news:N4******************************@golden.net.. .

mark wrote:

>"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

>>#right, #left {
float: right;
width:200px;
background-color:red;
}

that works! But can you please explain what you did and why? I can't
really figure out why align both divs to the right would fix it?

Although this method works, it does present a problem for any subsequent
material since everything is floated, therefore I prefer this method:

<style type="text/css">

#container {
background-color: pink;
width: 400px;
}

#right {
float: right;
width:200px;
background-color: red;
}

#left {
margin-right: 200px;
background-color: green;
}

</style>

<div id="container">
<div id="right">Right</div>
<div id="left">Left</div>
</div>

These approaches do work in the example I gave, but as soon as you put an
image with a width of 200px in the left div instead of the word 'Left' it
spoils again. Any more ideas?

Mar 4 '07 #9

Jim Moe

mark wrote:

>
These approaches do work in the example I gave, but as soon as you put an
image with a width of 200px in the left div instead of the word 'Left' it
spoils again. Any more ideas?

Don't use 100% of the width. IE is rather bad at basic arithmetic. If
you want the two divs to fill the fixed width container, use percentages
for the widths instead, and set the value to 49%, or even 49.5% each.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Mar 4 '07 #10

Gus Richter

mark wrote:

>
These approaches do work in the example I gave, but as soon as you put an
image with a width of 200px in the left div instead of the word 'Left' it
spoils again [in IE]. Any more ideas?

You may wish to consider Jim's suggestion to use percentages.
I'm not very knowledgeable on IE bugs, but you could try:

* html #floated-image {margin: 0 -3px; } /* for IE 3px jog problem */

Of course, give your image the same ID and read up on it here:
http://www.positioniseverything.net/...reepxtest.html

--
Gus

Mar 4 '07 #11