Equal Height Column Layouts With Borders And Negative Margins In CSS - CSS Essentials - page 186

CSS
We start with the generic rules from the previous demo:
html {
background: #45473f;
}
body {
width: 80%;
margin: 20px auto;
background: #ffe3a6;
}
#header,
#footer {
overflow: hidden;
zoom: 1;
background: #9c9965;
}
#sidebar {
float: left;
width: 200px;
}
#main {
float: left;
}
To which we add position: relative :
#wrapper {
display: inline-block;
border-left: 200px solid #d4c37b;
position: relative;
}
#sidebar {
margin-left: -200px;
position: relative;
}