Float problem with IE think FF is correct

[gokeeffe]

Hi there,

Alas this positioning stuff has again foiled me.

Here's the problem!

I have the following css code

#sitemapleft{
float:left;
width:49%;
background-color:#0033CC;
}

#sitemapright{
margin-left:50%;
background-color:#99CC33;
}

to position my site map elements on my site map page

It seems to do what I want in FF but in IE it's causing me problems.

I have included background colors so you can see the difference.

The link to the page is http://www.askaboutvalidation.com/site_map.php

Hope someone and clear this up for me.

Regards

Graham

[markbrown4]

Hello,

Float both columns,

#sitemapright{
  width:50%;
  float: left;
  background-color:#99CC33;
}

Hope it helps

I believe it's a hasLayout issue - though I've been wrong before.. once.
So there's probably another fix for IE but Floating is a pretty clean solution and you can have columns in either order that way.

[gokeeffe]

Just to confirm, is it ok to float both divs to the left?

[markbrown4]

Yes, two floats will stack side by side if there's room but you'll have 1% gap on the right - because of your widths. If you float one left - one right there'll be 1px gap in the middle.
You can make it 1px if you want which is slightly less noticeable: And only IE is effected by the bug so you could make it perfect widths in all other popular browsers if you wanted.
You will need to clear the floats though - so the parent doesn't collapse

http://www.yellowshoe.com.au/tips/ex...S-Columns.html

[gokeeffe]

"You will need to clear the floats though - so the parent doesn't collapse"

How do I do this i am running into this problem now the parent is collasping how do I clear this problem

tks

[markbrown4]

How do I do this i am running into this problem now the parent is collasping how do I clear this problem

A pun

It's all in the FAQ - There's some real gold in there so check it out.
'clearfix' or adding a clearing div after your columns will solve it.

The easiest(and least elegant) way:

<div>
  <!-- Column1 -->
  <!-- Column2 -->
  <div style="clear: both"></div>
</div>

[gokeeffe]

Thank you