css - Flexible 2nd and 3rd column system via CSS2 -
i have following setup 3 column layout:
#column-menu { float: left; width: 25%; } #column-main { float: right; width: 55%; } #column-side { float: left; width: 20%; }
this code works following html:
<div id="column-side">my right side content</div> <div id="column-main">my main content</div> <div id="column-menu">my sub menu</div>
i'm not committed using floats. happens works above structure, except when nothing in column-side. in case column-main cover additional width , not constrained 55%. there way build kind of flexibility css alone?
if want floats, have reorder elements:
.column-side { float: left; width: 20%; background: #00ffff; } .column-menu { float: left; width: 25%; background: #00ff00; } .column-main { overflow: hidden; background: #ffff00; }
<div class="column-side">side</div> <div class="column-menu">menu</div> <div class="column-main">main</div> <hr /> <div class="column-side"></div> <div class="column-menu">menu</div> <div class="column-main">main</div>
Comments
Post a Comment