Float: test with 'display: inline-block'

Table Of Contents

1. A floating div with content next to float positioned using the 'margin' property
2. Same as above, but with lenghts in percentages
3. Two sequential floating divs
4. Two opposite floating divs
5. Two opposite floating divs with some content in the middle
6. Two opposite floating divs with an image in the middle
7. Using margins
8. Using padding

1.A floating div with content next to float positioned using the 'margin' property

CSS code:

.wee1 {
width: 200px;
margin: 0;
padding: 0;
background: orange;
color: #000;
float: left;
display: inline-block;
}

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

.clear {
clear: both;
margin: 0;
padding: 0;
background: green;
width: 100%;
color: #fff;
}

Comments

This first example looks similar in all browsers (Internet Explorer 6, Internet Explorer 5+, Mozilla, Firefox, Opera). Margins and padding are both set to 0. The width of the floated element is set using pixel units, while the div next to the float is positioned setting its left margin to 200 pixel.

2. Same as above, but with lenghts in percentages

CSS code

.wee2 {
width: 20%;
...
}

.next2 {
margin-left: 20%;
...
}

Comments

This example looks similar in all browsers (Internet Explorer 6, Internet Explorer 5+, Mozilla, Firefox, Opera). Margins and padding are both set to 0. The width of the floated element is set using percentages, while the div next to the float is positioned setting its left margin to 20%.

3. Two sequential floating divs

CSS code

.wee3 {
width: 200px;
margin: 0;
padding: 0;
background: orange;
color: #000;
float: left;
display: inline-block;
} 
.next3 {
width: 400px;
margin: 0;
padding: 0;
background: yellow;
color: #000;
float: left;
display: inline-block;
} 

Comments

This example looks similar in all browsers (Internet Explorer 6, Internet Explorer 5+, Mozilla, Firefox, Opera). Margins and padding are both set to 0. Both elements have the declarations 'float: left' and 'display: inline-block'.

4. Two opposite floating divs

CSS code

.wee4 {
width: 200px;
...
float: left;
display: inline-block;
} 
.next4 {
width: 400px;
...
float: right;
display: inline-block;
} 

Comments

This example looks similar in all browsers (Internet Explorer 6, Internet Explorer 5+, Mozilla, Firefox, Opera). Margins and padding are both set to 0. Elements have respectively the declarations 'float: left' and 'float: right'.

5. Two opposite floating divs with some content in the middle

CSS code

.wee5 {
width: 200px;
...
float: left;
display: inline-block;
} 
.next5 {
width: 400px;
...
float: right;
display: inline-block;
}
.content {
margin-left: 200px;
margin-right: 400px;
padding: 0;
background: aqua;
color: #000;
}

Comments

This example looks similar in all browsers (Internet Explorer 6, Internet Explorer 5+, Mozilla, Firefox, Opera). Margins and padding are set to 0. Both floating elements have respectively the declarations 'float: left' and 'float: right'. Content in the middle is positioned using its left and right margins.

6. Two opposite floating divs with an image in the middle

The sun deserted Arnette; the town grew dark under the wing of the night. The town was, except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind chimes, silent. And silent. And silent.

The sun deserted Arnette; the town grew dark under the wing of the night. The town was, except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind chimes, silent. And silent. And silent.

clear: both

CSS code

.wee6 {
/* same as above */
}

.next6 {
/* same as above */
}

img {
margin: 0;
padding: 0;
float: left;
display: inline-block;
}


/*\*/ * html  img {margin-left /*\*/: -3px;} /**/

Comments

This example looks similar in all browsers (Internet Explorer 6, Mozilla, Firefox, Opera), except for Internet Explorer 5 (Win). We need to use an hack (marked in red) to fix the problem. Note the CSS comments used to fool Internet Explorer 5. Margins and padding are set to 0. Both divs have respectively the declarations 'float: left' and 'float: right'. The image in the middle is positioned using the 'float' property. Notice that its dimensions are not explicitly specified. It has also the declaration 'display: inline-block'.

7. Using margins

CSS code

 .wee7 {
width: 200px;
margin: 0 0 0 10px;
padding: 0;
background: orange;
color: #000;
float: left;
display: inline-block;
} 
.next7 {
width: 400px;
margin: 0 0 0 10px;
padding: 0;
background: yellow;
color: #000;
float: left;
display: inline-block;
}

* html body .cont .wee7 {height: 0; display: inline;}

Comments

This example looks similar in all compliant browsers (Mozilla, Firefox, Opera), but not in Internet Explorer (version 6 and lower). In fact, IE requires the hack marked in red, because it adds an extra space between the floating divs. For more informations, please see the article How To Attack An Internet Explorer (Win) Display Bug.

8. Using padding

CSS code

 .wee8 {
width: 200px;
margin: 0;
padding: 10px;
background: orange;
color: #000;
float: left;
display: inline-block;
} 
.next8 {
width: 400px;
margin: 0;
padding: 10px;
background: yellow;
color: #000;
float: left;
display: inline-block;
}

Comments

This example looks similar in all browsers (Internet Explorer,Mozilla, Firefox, Opera). The padding of both floated elements is set to 10 pixels for all sides (top, right, bottom, left).

Back to September 2006