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
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...
Attachment | Size |
---|---|
Safari_screen.jpg | 46.09 KB |
IE6_screen.jpg | 53.31 KB |
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:
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.
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.