In HTML, how can a div take the remainder of the width if another is explicitly set?

[dzgn]

I am trying to align two div elements horizontally in an HTML page: one is a navigation menu on the left, set explicitly to 180px wide, and the one on the right is the main page content. Is there a way for the right div to take up the remainder of the width? The code I have so far is below, but places the \[code\]section\[/code\] div below the \[code\]nav\[/code\] div rather than alongside it.HTML:\[code\]<div class="nav"> </div><div class="section"> </div>\[/code\]CSS:\[code\]div.nav { float: left; height: auto; width: 180px;}div.section { float: right: height: auto; width: 100%; margin-left: 180px;\[/code\]I originally tried setting the \[code\]position\[/code\] for both to \[code\]fixed\[/code\]and \[code\]height\[/code\] to \[code\]100%\[/code\]: this gave the correct layout but had no vertical scrolling! I also tried setting the nav div \[code\]float\[/code\] to \[code\]left\[/code\] which worked when no width was set, but did not fill the remainder of the screen (colours have been omitted for clarity).I would like to avoid the use of tables, if possible. Also, I appreciate that these two div elements could be replaced with HTML5 \[code\]<nav>\[/code\] and \[code\]<section>\[/code\].