2 replies [Last post]
tbart
Offline
newbie
Last seen: 15 years 51 weeks ago
Joined: 2006-01-29
Posts: 1
Points: 0

I need a basic two column layout. In IE the second column jumps bellow the first one.

I know how to do it other ways. But I would like to ask you why does it work in Mozilla and DOES NOT in IE.

Where is the problem?

Thank you,

* { margin:0;padding:0; }
#page { width: 800px; margin:0px auto; }
#left { float:left; width:100px; height:300px; background-color:red; }
#right { margin-left:100px; width:700px; height:300px; background-color:blue; }

<div id="page">
<div id="left"><div></div></div>
<div id="right"><div></div></div>
</div>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

2-column IE problem

IE adds 3px margin to floats that causes all sorts of problems.

A simple fix is to remove the width property from the non-float element. It will then simply use the width available to it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Irka
Offline
newbie
Vietnam, Saigon
Last seen: 15 years 51 weeks ago
Vietnam, Saigon
Timezone: GMT+7
Joined: 2006-01-30
Posts: 3
Points: 0

2-column IE problem

Actually yeah i would have suggested the same. You should remove your width parameter