Gap between 2 columns when viewed in IE

Forum Moderators: not2easy

Message Too Old, No Replies

Gap between 2 columns when viewed in IE

using float left and margin-left

PublicSphere

12:01 pm on Jul 23, 2005 (gmt 0)

It all looks fine in FF, but in IE there is a 2 px gap between these two columns. Can't work out why.

Here is some html:

.main {
background-image: url(images/design/main_slice.gif);
background-repeat: repeat-y;
padding: 0px;
width: 762px;
margin-right: auto;
margin-left: auto;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;

}

#left {
margin: 0px;
padding: 0px 0px 0px 6px;

width: 206px;
float: left;
background-color: #bbb;

}

#right {
margin: 0px 0px 0px 206px;
padding: 0px;
width: 550px;
background-color: #0000FF;

}

</style>
</head>

<div class="main">

<div id="left"> left column content</div>
<div id="right">some text here</div>
</div>

</body>
</html>

Anyone got any idea why this happens?

Thanks very much for your help.

faltered

11:39 pm on Jul 23, 2005 (gmt 0)

Can I ask why you have your #left section floated left, but don't have your #right section floated right? Try doing that, it might solve your problem.

SuzyUK

10:19 am on Jul 24, 2005 (gmt 0)

>>Why?

because you have a width on the #right column this width is triggering IE's hasLayout problems and invoking it' quirky float model 3px gap, which is a common cause of floated layouts "breaking". Those 3px can cause lots of problems.

Not sure if this'll work for you but if you remove the width on that column it should help, the overall width of the container (#main) should keep it contained, also then the left margin should work properly. Then if you need a space on the right hand side (for another shadow?) you can use a right margin instead.

#right {
margin: 0px 6px 0px 212px; /* right margin for graphic clearance */
padding: 0px;
/*width: 550px;*/
background-color: #0000FF;
}

Not having a dimension on that column should help cure the 3px problem, but may then cause other internal problems in IE, these should be fixable too.. let us know

Suzy

PublicSphere

9:22 am on Jul 25, 2005 (gmt 0)

I tried floating #right to the right.

That didn't work in FF - it just put #right under #left. It works in IE and at a quick glance it did take the 3px gap out as well, but its no good if it doesn't work in other browsers - I didn't think you had to put float right on a right column in a 2 column layout?

I still don't know much about tableless layouts. I think I just made this up as a I went along - maybe I should have a look for some guides - although i thought this 3px gap might be worth mentioning in this forum anyway.

You're right Suzy about the right shadow, but the 3px margin on the right didn't help, and taking the width off didn't take out the 3px gap on the left.

So I'm back to square 1 again, but thanks for your help anyway.

SuzyUK

11:38 am on Jul 25, 2005 (gmt 0)

are you using a valid Doctype? [w3.org]

If you're using a "Quirks Mode" one (or not using one at all) this will mean IE is staying in quirks mode (even without width trigger) which will mean it's more difficult to deal with the 3px Jog..

e.g. try this at the very start of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Using a Doctype to set IE into "Strict" rendering mode will help with IE Box Model issues too..

Thanks for posting this, the 3px Jog is well known but the various fixes are dependant on internal page factors.. so if we can narrow them down we should be able to get this working for you.. :)

Suzy

PublicSphere

2:49 pm on Jul 25, 2005 (gmt 0)

Thanks for your advice Suzy.

I put that in at the top.

It made the #right div go into the correct position horizontally but now it is underneath the #left div in IE (although the 3px gap is now gone).

Still looks correct in FF.

I'll give you some more of my CSS, and some that I may have changed, having read some tutorials:

body {
background-image: url(images/design/body.gif);
margin: 0px;
padding: 0px;
text-align: center;

}

}

#left {
margin: 0px;
padding: 0px 0px 0px 6px;
color: #FFFFFF;
width: 206px;
float: left;
display: inline;

}
#right {
margin: 0px 0px 0px 206px;
padding: 0px;
width: 550px;
background-color: #FF0000;

}

hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

Thanks for your help.

PublicSphere

3:05 pm on Jul 26, 2005 (gmt 0)

I've recently realised that i did already have this at the top of my page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But without the url.

I cut and pasted the code from this forum thread and without realising it did not paste in the correct format so i replaced my correct one with one that didn't work. But anyway i've fixed that now and since re-designed my site (for about the 10th time - and it still has never been completed).

I'm still having this problem with the 3px gap. My css might be slightly different now so here it all is again:

body {
background-image: url(images/design/body.gif);
text-align: center;
margin: 0px;
padding: 0px;
}

.main {
background-image: url(images/newdesign/main_slice.gif);
background-repeat: repeat-y;
width: 762px;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;

}
#left {
float: left;
width: 200px;
padding-left: 6px;

}
#right {
width: 550px;
margin-left: 206px;
}
hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

Ayone got any suggestions why this gap is appearing- it is literally a gap - neither #left or #right are displaying larger than they should - there is just a 3px gap between them when viewed in IE.

Here is some html:

<div class="main">
<div id="left">
left content

</div>

<div id="right">right content</div>

Thanks in advance for any help.

I read some online tutorials and looked at some examples and i can't see what i'm doing wrong.