This technique works because all columns are set to float and their widths aren’t larger than 100%. Setting the floats to the right can flip the columns, but the result is the same.
Be sure to apply margins and padding to the elements within the columns (unless you account for their widths when sizing the columns). If you don’t, the columns will expand beyond 100%, forcing one or more columns to wrap underneath each other.
<!doctype html>
<html>
<head>
<style type="text/css">
#columnRight {
width: 33%;
min-width:300px;
float: right;
background: white;
color:black;
padding-bottom: 1em;
}
#footer {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
background: green;
color:#fff;
}
#columnMain {
width:65%;
height: 100%;
float:left;
background: white;
padding-bottom: 1em;
border-style:solid;
border-width:1px;
}
#header {
width: 100%;
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
background: #336699;
text-align: center;
color:#fff;
}
body {
background: white;
}
</style>
</head>
<body>
<div id="header">
<p> this is in header paragraph text</p>
</div>
<div id="columnMain">
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
<p> this is in main paragraph text</p>
</div>
<div id="columnRight">
<p> this is in right paragraph text
</p>
</div>
<div id="footer">
<p> this is in footer paragraph text</p>
</div>
</body>
</html>
