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

Problem

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?

Thanks

Problem courtesy of: gcubed

Solution

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

Discussion

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.

http://jsfiddle.net/XFaeZ/

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.