problem with 2 col layout in IE

css layout with two columns

[olaf]

Hallo,

Please have a look in the attached example:

the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side.

Anyone with some advice?

<No URLs or site reviews, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

regards.

Olaf

[edited by: DrDoc at 9:24 pm (utc) on Aug. 20, 2004]

[evilregis]

I would say try reducing the width of your buttons. It will affect Mozilla though. Normally in a situation like that I do something like this:

#navcontainer li a { width: 105px; } /* IE sees this */
html>body #navcontainer li a { width: 109px; }

Basically IE sets 105 but doesn't understand what to do with the next line so 105px sticks. Other browsers DO recognize the next line and therefore the new width: 109px overrides the 105px declaration.

Seems like, in your example, IE is just wrapping over to the next line. Why is only IE doing it? Best guess would be the glorious MS box model. If you don't know what is wrong with their box model, you can ask here or do a google search. There's more than enough info. You should familiarize yourself with it as it comes into play quite often.

[olaf]

yes the problem was the width but not for the buttons.

Inside the list i have to in a width of 100%....

[DrDoc]

Sounds like a margin problem to me. You don't happen to have the elements floated left with a left margin specified, do you?
If that's the case, simply apply

display:inline

to the floating element.

For more information on these and similar IE bugs: [webmasterworld.com...]

[olaf]

Hallo,

The problem is resolved for now. I have a question to you DrDoc: You removed the link to my example, how do post here your problem pasting everything in the textarea?

In the most forums are possiblities for uploading files...