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?
Sure, keep the 100% width on the remaining page and add
(your remaining page should be placed inside a containing div)
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.
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.
This recipe can be found in it's original form on Stack Over Flow.