I want a floated div(left) and another div next to it with no gap.
Works in Firefox. IE there is a 3 pixel gap.
Yes I have looked at the 3 pixel bug documentation:
http://www.positioniseverything.net/...reepxtest.html
But it does not help me.
***********here is the css****************
html{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#floatleft {
float:left;
height:30px;
width:90px;
background:#ff0000;
border-width:0px;
}
#box1 {
height:60px;
width:200px;
background:#0000ff;
margin-left:90px;
border-width:0px;
}
here is the html
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
</head>
<body>
<div id="floatleft">
float left text
</div>
<div id="box1">
box 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 text
</div>
</body>
</html>
On reading http://www.positioniseverything.net/...reepxtest.html
It sort of looks like my problem, indeed they are both 3px bugs, but that pie-doc seems to show the 3px gap only on text, while my own 3px gap is on the box edges, not padding the text.
You can see this becuase at the egde of the float on the pie-doc, the text padding stops. But on my own, the text is aligned to the left side of the box anyway, so even when the float stops, and the aligned box continues, the box and all the text still has the 3px gap!
I have tried the solutions anyway, giving 1% height to the box next to the float, making the box1 a paragraph(with zero padding+margin), putting them in a container with specified width/height. But nothing seems to work. I get the feeling I am missing something obvious.
And No I do not want to try floating the 2nd box right becuase that just causes widths problems for me later. (floats dont span 100% remainder width, and mixing 100% + fixed px widths causes overflow etc etc)
*******************************************************
*********** THE NEXT PROBLEM (BUG2) *******************
I tried having the float, not floating, but positioned absolutly instead, and then having the box1 as a margin.
html{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#absolute {
position:absolute;
height:30px;
width:90px;
background:#ff0000;
border-width:0px;
}
#marginleft {
height:60px;
width:200px;
background:#0000ff;
margin-left:90px;
border-width:0px;
}
But then I run into another bug(of course only with IE:
If I have a div positioned absolutly and then a div positioned relativley, directly following it in the html doc, the absolute div seems to take a left margin equal to the left margin of the relative div(even if the relative div is floated right to the other side).
This can be solved by putting text between the divs in the html:
<div id="absolute">
float left text
</div>
text that fixs bug
<div id="marginleft">
</div>
But obviously this causes a gap above #marginleft.
Anyone know a fix for this bug without putting content between the divs in html?
I can not anywhere find documentaion of this html bug for ie.6
So I have 2 IE.6 bugs. (I seem to spend 99% of my web design time being stumped on IE not displaying things properly)
Can anyone point me in the right direction?
I am assuming they are IE.6 bugs, and not me just being an idiot and not using proper code becuase everything always looks perfect in firefox.
Any help is appreciated.
