Negative margins and floats change in behavior
jjsn...@rcn.com
the negative margin two column technique. I am wondering if it is a
bug or intended change.
The technique is described here http://www.alistapart.com/articles/negativemargins
as well as other places.
I found that with Firefox 2, Opera 9.25 and IE6/7 that it does not
matter if the sidebar comes before or after the content. With Firefox
3 if the sidebar comes first then it does not receive mouse clicks.
Usually you want the content first but I had a case where the sidebar
came first and in Firefox 3 the links and buttons in the sidebar could
not be clicked and text could not be selected either. Also if the
content float has a background color then it completely covers the
sidebar when the sidebar comes first.
The below example shows all four combinations of sidebar float left or
right and sidebar first or second in document order. Just save it to a
file and open in various browsers to see the difference.
Is there some CSS rule that says a float with a negative margin must
come first?
Begin example html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example 4: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<style type="text/css" media="screen">
/*<![CDATA[*/
body {
background-color: gray;
}
#wrapper1, #wrapper2, #wrapper3, #wrapper4 {
background-color: yellow;
}
#header {
background: #d7dabd;
margin-bottom: 20px;
}
#container1, #container2, #container3, #container4 {
width: 100%;
/* xxxbackground-color: green; */
float: left;
margin-right: -200px;
}
#container3, #container4 {
float: right;
margin-left: -200px;
margin-right: 0;
}
#content1, #content2, #content3, #content4 {
background: blue;
margin-right: 200px;
}
#content3, #content4 {
margin-left: 200px;
margin-right: 0;
}
#sidebar1, #sidebar2, #sidebar3, #sidebar4 {
width: 200px;
background-color: red;
float: right;
}
#sidebar3, #sidebar4 {
float: left;
}
.spacer {
background: #d7dabd;
margin: 10px 0px;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
</style>
</head>
<body>
<div id="header">header</div>
<div id="wrapper1">
<div id="container1">
<div id="content1">
<h1>content</h1>
<p>Sidebar left, second</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis,
posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet
metus.
In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
</div>
</div>
<div id="sidebar1">
<h1>sidebar second</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
<input type="checkbox" name="cb1">
</div>
<div class="clearing"> </div>
</div>
<div class="spacer">spacer</div>
<div id="wrapper2">
<div id="sidebar2">
<h1>sidebar first</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
<input type="checkbox" name="cb2">
</div>
<div id="container2">
<div id="content2">
<h1>content</h1>
<p>Sidebar left, first</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis,
posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet
metus.
In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
</div>
</div>
<div class="clearing"> </div>
</div>
<div class="spacer">spacer</div>
<div id="wrapper3">
<div id="sidebar3">
<h1>sidebar first</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
<input type="checkbox" name="cb3">
</div>
<div id="container3">
<div id="content3">
<h1>content</h1>
<p>Sidebar right, first</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis,
posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet
metus.
In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
</div>
</div>
<div class="clearing"> </div>
</div>
<div class="spacer">spacer</div>
<div id="wrapper4">
<div id="container4">
<div id="content4">
<h1>content</h1>
<p>Sidebar right, second</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis,
posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet
metus.
In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
</div>
</div>
<div id="sidebar4">
<h1>sidebar second</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
<input type="checkbox" name="cb4">
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer</div>
</body>
</html>