Negative margins with relative lengths
Back to October 2006
1. Using ems
The HyperText Markup Language (HTML) is a simple data format used to create hypertext documents that are portable from one platform to another.
HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains.
As HTML is an application of SGML, this specification assumes a working knowledge of [SGML].
The HyperText Markup Language (HTML) is a simple data format used to create hypertext documents that are portable from one platform to another.
HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains.
As HTML is an application of SGML, this specification assumes a working knowledge of [SGML].
CSS code
.boxa {
margin: 2em 0.5em;
padding: 0;
width: 18em;
background: orange;
color: #000;
border: 1px solid;
}
.boxb {
margin: -14.5em 0 0 19em;
padding: 0;
width: 18em;
background: yellow;
color: #000;
border: 1px solid;
}
Comments
The em solution works fine in all browsers (Internet Explorer 6, Internet Explorer 5 Windows, Firefox, Opera). Note how the
two boxes seem to be floated.
2. Using percentages
The HyperText Markup Language (HTML) is a simple data format used to create hypertext documents that are portable from one platform to another.
HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains.
As HTML is an application of SGML, this specification assumes a working knowledge of [SGML].
The HyperText Markup Language (HTML) is a simple data format used to create hypertext documents that are portable from one platform to another.
HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains.
As HTML is an application of SGML, this specification assumes a working knowledge of [SGML].
CSS code
.boxc {
margin: 2% 1%;
padding: 0;
width: 20%;
background: orange;
color: #000;
border: 1px solid;
}
.boxd {
margin: -30.6% 0 0 22%;
padding: 0;
width: 20%;
background: yellow;
color: #000;
border: 1px solid;
}
* html body .boxd {margin-top: -30.8%;}
@media all and (min-width: 0px){
body > .boxd {
margin-top: -33%;
margin-bottom: 4%;
}
}
Comments
This example works only with a full resolution screen. When an user resizes the browser window, the vertical positioning
is obviously lost, just because the percentages calculation depends on windows size. Results are widely different in all browsers,
depending on the various algorithms used to compute percentages. To gain a rough similarity between browsers, we need to use the
two hack marked with different colors: the red one is for Internet Explorer 6, the blue one for Opera.
3. Conclusion: use em!
The em solution seems to be a good choice in this case. Percentages calculation is too much complicated for browsers, so we
prefer to use the simple way. Sancta simplicitas!
4. Credits: thanks to Bruno Fassino
