I have 3 columns. left, middle and right.
left and middle are fixed-width, right should fill the remaining space.
How can I accomplish this?
Current HTML
<div id="menu"> <div id="left"> </div> <div id="middle"> </div> <div id="right"> </div> </div> LESS
#menu { width: 100%; #left { width: 20%; float: left; } #middle { width: 300px; float: left; } #right { overflow-x: hidden; float: right; } } 
#menu { width: 100%; #left { width: 20%; float: left; } #middle { width: 300px; float: left; } #right { width: -webkit-calc(100% - 20% - 300px); width: -moz-calc(100% - 20% - 300px); width: -o-calc(100% - 20% - 300px); width: calc(100% - 20% - 300px); float: right; } }
You must know that calc is still an experimental technology, I suggest you to use javascript instead if you are looking for browser compatibility.
Here is a fiddle with it all working.
It's "small-screen-first" so - if you aren't into that... then you can just delete the @media rule.
It looks like all you really need, is a width auto - and to make sure it's not floated.
<aside class="container left"><h2>Left</h2></aside> <section class="container main-content"><h2>Main content</h2></section> <aside class="container right"> <h2>Right</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et beatae quam quibusdam dolor dolorum vero harum commodi vel quidem quasi sed dolores iusto is</p> </aside> * { box-sizing: border-box; } .container { width: 100%; float: left; } @media (min-width: 800px) { .left { width: 20%; } .main-content { width: 400px; } .right { width: auto; float: none; } } I think
#right{ width:auto; float:right; overflow-x: hidden; } has to work.
#middle { width: 300px; float: left; position: relative; /* Show above #right */ } #right { width: 80%; margin-left: -300px; /* equal to width of #middle in px */ padding-left: 300px; /* equal to width of #middle in px */ -moz-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden; float: right; } 
float: right;from#rightelement.overflow-x: hidden;does the trick.