Float test

Back to the article

Table of contents

1. A floating div
2. A floating image
3. Two opposite floating divs
4. A floated menu
5. Conclusion: weird scenes inside Internet Explorer's mind

1. A floating div

CSS code

.float1 {
margin: 0;
padding: 0;
width: 200px;
background: orange;
color: #000;
float: left;
}

.opposite1 {
margin-left: 200px;
padding: 0;
background: yellow;
color: #000;
}
.clear {
margin: 0;
padding: 0;
background: aqua;
color: #000;
clear: both;
}

* html body .opposite1 div {
position: relative;
left: -3px;
 }

HTML code

<div class="opposite1">
<div>Ibam forte via sacra...</div>
</div>

Comments

I was going slightly mad, because Internet Explorer 5.0 (Win) insisted to display the text of the yellow div with an extra space of 3 pixels, even when I've declared 'margin-left: -3px' in the CSS hack marked in red. I didn't expect. Using 'height: 1%' I got what I wanted, but the yellow div was shifted rightwards. So what? I decided to put an extra div element in, and declare 'position: relative; left: -3px' (see the HTML code marked in red). I dont' really know if it's a good solution. Try it and let me know.

Note The error was mine. I didn't remember how the hack should be written, so I've tried harder and harder until I've reached the solution mentioned above. Now we have to see if the declaration 'position: relative' affects the positioning of other elements inside the yellow div.

CSS code

.opposite1 div h4 {
margin: 0;
padding: 1.2em 1em;
}

.opposite1 div p {
margin: 0;
padding: 1.2em 1em;
}

Comments

We use padding instead of margins to fix an old oddity of Internet Explorer, namely the shifting of the containing block when one of its in-flow children has the top and bottom margins set.

2. A floating image

CSS code

img.broken {
float: left;
margin: 0;
padding: 0;
}

.opposite2 {
margin-left: 400px;
padding: 0;
background: yellow;
color: #000;
}

/*\*/
* html body .opposite2 div {
position: /**/ relative;
left: /**/ -3px;
}
/**/

HTML code

<img src="broken-window.jpg" alt="A broken window" class="broken">
<div class="opposite2">
<div>Ibam forte via sacra...</div>
</div>

Comments

The CSS hack marked in red is only for Internet Explorer 5. Strangely, Internet Explorer 6 displays the yellow div correctly.

3. Two opposite floating divs

CSS code

.float1 {
margin: 0;
padding: 0;
width: 200px;
background: orange;
color: #000;
float: left;
}

.float2 {
margin: 0;
padding: 0;
width: 200px;
background: yellow;
color: #000;
float: right;
}

* html body .clear {height: 100%;}

/*\*/
* html body .clear {
height: /**/ auto;
height: /**/ 1%;
}
/**/

Comments

The CSS hack marked in red help us to have a good clearance in Internet Explorer 6. The one in blue is for Internet Explorer 5.

Note Something is very wrong here. When I resize the viewport to 800 x 600 pixels, both in Firefox and Internet Explorer (5 and 6) appears the horizontal scrollbar. For Internet Explorer I've declared:

<!--[if IE]>
<style type="text/css">
body {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
</style>
<![endif]-->

For Firefox then? Please see this article for a comparison.

4. A floated menu

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

CSS code

.menu {
margin: 0;
padding: 0;
list-style: none;
}

.menu li {
float: left;
display: inline;
margin: 0 7px 0 0;
padding: 0;
}

.menu a:link, .menu a:visited {
float: left;
display: block;
width: 120px;
margin: 0;
padding: 3px 5px;
color: #329;
background: transparent;
text-decoration: none;
border: 1px solid #000;
}
.menu a:hover {
background: #329;
color: #fff;
text-decoration: none;
}

* html body .clear2 {
line-height: 0; 
height: 0; 
margin-top: -2em;
}

.clear2 {
clear: left;
margin: 0;
padding: 0;
width: 100%;
}

HTML code

<ul class="menu">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 <li><a href="#">Link 5</a></li>
</ul>
  <div class="clear2">&nbsp;</div>
  <h3>CSS code</h3>

Comments

Here the key of everything is the code given to Internet Explorer (5 and 6) through the hack marked in blue. This code comes from an article of Bruno Fassino with a change: I've added the declaration 'margin-top: -2em' because both Explorers double the top margin of the element following the div with the clearance (here <h3>, with 'margin-top: 2em'). It works. Another hint is the declaration 'display: inline' for the <li> element, given to prevent both Explorers to double the left and right margin of the list item. The explicit declaration of a width for the <a> element, together with the declaration 'display: block', is useful to fool Internet Explorer 5 and its well known problems with the calculation of the box model.

5. Conclusion: weird scenes inside Internet Explorer's mind

Basically, Internet Explorer (5 and 6) has huge problems with float. These problems can be related to dimensional bugs (see Position Is Everything), to the property hasLayout and to a grey zone where everything depends on several factors that cannot be understood without a hard practice in CSS code writing. Per aspera ad sidera.