2 replies [Last post]
Colinseu
Colinseu's picture
Offline
newbie
Last seen: 12 years 41 weeks ago
Joined: 2008-02-13
Posts: 2
Points: 0

Hello, this is my first post in this forum, i need help about the 3 pixels gap problem in IE6 with floating elements.
I've searched in the forum and i've found a lot a threads, but i didn't manage to make it work.
I've read also the positioniseverything.net pages about the problem, nothing i did about this made it work either.
At the end i let the first fix i've read, which doesnt help a lot since the height is already set in my CSS for the floating divs...
Here is my code, thanks for the help !

CSS:

* {
margin: 0pt;
padding: 0pt;
}

/* Hides from IE5-mac \*/
* html div {
height: 1%;
}
/* End hide from IE5-mac */

body {
font-family: sans-serif;
font-size: 1.5em;
color: #FFF;
margin: 0pt;
padding: 0pt;
}

#container {
background: gray;
width: 800px;
margin-left: auto;
margin-right: auto;
}

#header {
width: 800px;
height: 50px;
background: blue;
opacity: 0.2;
}

#nav {
width: 800px;
height: 20px;
background: purple;
opacity: 0.3;
}

#left {
float: left;
width: 20px;
height: 100px;
background-color: lime;
opacity: 0.5;
}

#right {
float: right;
width: 20px;
height: 100px;
background-color: lime;
opacity: 0.5;
}

#content {
margin-left: 20px;
margin-right: 20px;
width: 760px;
height: 400px;
background-color: aqua;
opacity: 0.5;
}

#footer {
width: 800px;
height: 30px;
background-color: navy;
opacity: 0.6;
}

HTML :

Untitled Document

L





This is content, and this and this and this, this also is content, and this and this and this, this also is content, and this and this and this...



AttachmentSize
Safari_screen.jpg46.09 KB
IE6_screen.jpg53.31 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're going about it the

You're going about it the wrong way. Don't create left and right columns separate from everything else. What you need to do is:

L

This is content, and this and this and this, this also is content, and this and this and this, this also is content, and this and this and this...

That way, left and right will stretch to be the same height as your main content area and you don't need to float anything. You then just need to move #content away from the edges with margins or padding.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Colinseu
Colinseu's picture
Offline
newbie
Last seen: 12 years 41 weeks ago
Joined: 2008-02-13
Posts: 2
Points: 0

Solved

Thanks Tyssen, i was going about it the wrong way indeed. I appreciate the help, it solved the problem.
I'm working on another template as well i hope i won't have to face the 3px gap again, lol.
Have a nice day.