Search code examples
htmlcssmargins

Negative margins and source order

I've got a question about negative margins. I've been reading this book about web design and in it there is an example of changing source order by using floats and negative margins however when I attempt to do the same it doesn't seem to work properly.

So given this HTML & CSS code, how do I swap the position of div1 and div2 using only floats and positive/negative margins? I know that there are numerous other ways but this thing bothers me and i want to figure it out.

both .div1 and .div2 should remain float: left;

body {
 background: #222; 
}

h1 {
 text-align: center;
 border-bottom: 1px solid navy;
}


.wrapper {
 width: 960px;
 margin: 0 auto;
 outline: 2px dashed yellow;
 
}

.footer {
 clear: both;
 background: black; 
 color: white;
 text-align: center;
}

.div1, .div2 {
 float: left;
 background: orange;
}

.div1 {
 width: 480px;
}

.div2 {
 width: 480px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
 <div class="div1">
  <h1>Heading 1</h1>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
 </div>
 
 <div class="div2">
     <h1>Heading 2</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
 </div>
 
<!--
 <div class="div3">
    <h1>Heading 3</h1>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sed aliquam alias fuga repudiandae facilis doloribus exercitationem perspiciatis, tempore amet repellendus eaque repellat, ipsa nesciunt libero modi iusto obcaecati mollitia.
</div>
-->
<div class="footer">Footer</div>
  </div>
</body>
</html>

Solution

  • In this case you can switch the div's even without (negative) margins

    Change this

    .div1, .div2 {
    float: left;
    background: orange;
 }

    To

    .div1, .div2 {
    background: orange;
 }

    And add your floats

    .div1 {
   float: right;
   width: 480px;
}

.div2 {
    float: left;
    width: 480px;
 }

    Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

    A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

    http://www.w3schools.com/css/css_float.asp

    EDIT
    If you want both divs to float left you could use this. I would not recommend it, because it can get reallly messy across brwosers

    .div1, .div2 {
   float: left;
   background: orange;
   position:relative;
}

.div1 {
  width: 480px;
  margin-left:480px
}

.div2 {
   width: 480px;
   margin-left:480px
   z-index:999;
   margin-top:-335px; 
}