Using em for navigation sidebar - what unit to use for remaining body container?


I have a webpage with a sidebar that has navigation options for the site. The sidebar is a width of 6em (right: 0px, height: 100%, position: fixed).

I want the rest of the content to utilize most of the remainder of the page (100% of total width, minus 7em).

Right now, I'm using percent on the main content - is there a smarter/better way?


Problem courtesy of: gcubed


Sure, keep the 100% width on the remaining page and add

padding-left: 7em;

(your remaining page should be placed inside a containing div)

Solution courtesy of: Caelea


It's hard to say without seeing some HTML, but I'd simply set your content div to 100% width and add right padding of 7em to accommodate the sidebar. What you do inside the content div is at your discretion.

Discussion courtesy of: isherwood

If the main content is display: block, it will use up the entire usable area by default. There is no need to specify it to 100% width. To make sure there is no overlap, give it a right margin of 6em (or whatever the width of the navigation bar is). Depending upon some of your inner element styles, there may be problems, but it's unlikely.

Notice how "content" is visible even though it's floated to the right. If the #content div were set at width: 100%, its margin would extend past the width of the page and "content" would be obscured.

Discussion courtesy of: Explosion Pills

This recipe can be found in it's original form on Stack Over Flow.