Not to long ago I got really sick of the variable white space between the content and the side bar. My CSS isn’t the best and my first attempted at a two column layout with divs was to use percentage widths to keep the columns separate. This looked pretty ugly, since the side bar should be a fixed width. There isn’t much benefit for it to be resizable.
I switch the layout to abosolutely position the right column and then added a large margin to the right of the left column to keep the content clear of the sidebar. The positioning CSS now looks like:
#content {
min-width: 370px;
margin-right: 270px;
position: relative;
float: left;
}
#sidebar {
width: 270px;
position: absolute;
right: 15px;
margin: 25px 0px 2px 3px;
}
This had the unintended effect of covering up the content when the screen was abnormally small, such as when I view the site with the Mylo. The site was rendered unreadable. The solution for this took a lot longer than I would have liked, but was pretty simple little bit of JavaScript:
/****************************************
* Script to re-float a column when the
* browser window becomes too small
****************************************/
window.onload = checkSize;
window.onresize = checkSize;
var sidebarElem = “sidebar”;
var contentElem = “content”;
function checkSize() {
var width = document.body.clientWidth;
if(width
The javascript is pretty simple. All it does is register listeners for page load and window resize. Then it changes the appropriate style properties to drop the side bar below the content on small screens. The “$(‘variableName’)” syntax is a nice shorthad for getElementById provided by the Prototype Javascript Library. To try out how it works, just make your browser window really narrow then wide again. The side bar will drop down and pop back up appropriately.
