IE float issue.

[ajnorris]

So far, everything seems to look ok in all browsers I've tried except for IE. This is what I have for a set up. I have a group of divs(classified) floated in a container div. The container div has a border and background color. These floated divs are basically boxes of text that I want lined up in rows and columns. If have few enough divs to only require one row at the top everything looks fine. When there are enough floated divs to require more than one row, the top row shows up outside of the container div. I have no clue as to why this is happening. Any help would be greatly appreciated.

CSS code:

#container
{
text-align: left;
margin: 20px 20px 0px 165px;
border-width: 1px;
border-color: #3399FF;
border-style: solid;
background-color: #FFFFCC;
border-collapse: collapse;
}

.classified
{
font-family: Verdana,Helvetica;
font-size: 8pt;
float: left;
width: 160px;
height: 65px;
padding: 0px 4px 2px 4px;

[Storyman]

ajnorris,

Height & Width are calculated differently in IE. Looks like you'll need the IE hack, which you'll find if you do a search in this forum or google.

You may also want to add a font family (sans-serif) to the font family.

[Harvs]

I tested your code I couldn't see exactly what you were trying to explain but try to float the container as well. That way all the classified div's in the container will stay inside.

[ajnorris]

It messes up my layout when I float the container div. So that won't work. Any other suggestions? I don't think its the IE hack issue, but I could be wrong.

[jfjet]

Would specifying a width for the container div mess up your layout? Try that.

[SuzyUK]

I don't think its the IE hack issue

well it's not a box model hack, but it is a layout hack [webmasterworld.com] that's required.

jfjet is right the container needs a dimension (layout hack), if width is not suitable, because it doesn't fit with your design then try hacking in a small height for it.. (1% is usual one used)

Suzy