Hello, I have a two column layout out http://blowback.zapto.org/metromusic. I want to do a number of things: 1. I want content 1 to expland and contract but always to be x distance from rightside. 2. I want content 1 and right side to be equal distances from the side. So basically what I want is is content 1 fluid and right side static. Any suggestions or tips? Thanks! Below you'll find the css code. <style type="text/css"> html { background: #CACCB4; } body { font: 16px arial, sans-serif; } #sidebar-a { float: left; width: 250px; /* I tried putting a left-margin on the right bar but that didn't work so see below in #left where i put a right margin on the left content */ /*margin: 0px 0px 100px 0px;*/ padding: 5px; background-color: #FFF000; border: 2px solid black; position: relative; } pre { text-indent: 30px; } #tabmenu { color: #000; margin: 12px 0px 0px 0px; z-index: 1; padding-left: 10px } #tabmenu li { display: inline; overflow: hidden; list-style-type: none; } #tabmenu a, a.active { color: #DEDECF; background: #898B5E; font: bold 1em "Trebuchet MS", Arial, sans-serif; border: 2px solid black; padding: 2px 5px 0px 5px; margin: 0px; text-decoration: none; } #tabmenu a.active { background: #ABAD85; border-bottom: 3px solid #ABAD85; } #tabmenu a:hover { color: #fff; background: #ADC09F; } #tabmenu a:visited { color: #E8E9BE; } #tabmenu a.active:hover { background: #ABAD85; color: #DEDECF; } #left { font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif; text-align: justify; background: #FFF000; padding: 20px; border: 2px solid black; border-top: 2px solid black; float: left; width: 50%; margin: 0px 10px 0px 0px; } #left a { text-decoration: none; color: #E8E9BE; } #left a:hover { background: #898B5E; } </style> Code (markup): and HTML <body> <ul id="tabmenu"> <li><a href="tab1.html">Home</a></li> <li><a href="tab2.html">Bands</a></li> <li><a class="active" href="tab3.html">Metros</a></li> </ul> <div id="left"> <p>Content 1 </p> </div> <div id="sidebar-a">right side</div> </body> Code (markup):
Just build both with percentages: html, body { width:100%; } .leftContentContainer { float:left; width:70%; } .rightContentContainer { float:right; width:25%; }