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

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -