Benjamin Lu

everyday is cool

A Sidebar with CSS Floats

Before Flexbox and Grid, a common way to position a sidebar was to float it and give the article room beside it. Try this with an element named menu followed by an element named article.

#menu {
  float: left;
  width: 10em;
}
#article {
  margin-left: 11em;
}
#footer {
  clear: both;
}

Put the footer after both elements. Add enough menu links to make the sidebar taller than the article. Remove clear: both and compare where the footer starts. Put the rule back and narrow the browser window. The fixed sidebar still takes its share of the available space, which leaves less room for the article.

This is a useful exercise when reading an old stylesheet. The extra margin creates the gap, and the clear rule keeps the footer below the float. Both decisions are easier to spot when you change them separately.