My layout features fixed-width sidebars on the left and right, with a fluid main content area that fills the space in between using float:left. Here's an example:
#left-sidebar {width: 200px;}
#right-sidebar {width: 300px;}
#main-content {margin-left: 200px; margin-right: 300px}
Everything works fine if #main-content has enough content, but when it's sparse, its width collapses and messes up the design.
To workaround this issue, I've resorted to a rather clumsy hack of adding a block element at the end of #main-content like this:
<div>a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
and then setting its visibility to hidden to force #main-content to maintain its full width. However, I'm looking for a cleaner solution without relying on hacks.
(Simply setting the width of #main-content or any internal element to 100% is not a viable fix.)