stylesheet - Fixed 3 columns layout Zurb Foundation css -


i want 3-col layout that:

  • left column contains fixed / sticky list items
  • left , middle column have fixed known width
  • 3rd column must left on space; no horizontal bar
  • 3rd column have multiple columns within , want use foundation framework grid (below example shows 2 large-6 in blue)
  • all columns must expand top bottom

i want leverage zurb foundation framework , reuse as can grid framework.

here ideal layout:

enter image description here

this code far: http://jsfiddle.net/qhoc/uufsf/

  <body>     <div class='row'>       <div class='col1 columns'>           <ul class='sticky'>               <li>item 1</li>               <li>item 2</li>               <li>item 3</li>               <li>item 4</li>               <li>item 5</li>           </ul>       </div>       <div class='col2 columns'>           <div>some text 2</div>       </div>       <div class='col3 columns'>           <div class='row'>               <div class='large-6 columns'>left</div>               <div class='large-6 columns'>right</div>           </div>       </div>     </div>   </body> 

the css:

body {     position: relative; }  .sticky{     position:fixed;     z-index:999; }  .col1 {     position: absolute;     left: 0;     background: yellow; }  .col2 {     position: absolute;     left: 150px;     top: 0;     bottom: 0;     }  .col2 div {     background: red; }  .col3 {     position: absolute;     left: 300px;     top: 0;     right: 0;     bottom: 0; }  .col3 div {     background: blue; } 

there several problems:

  • 3rd column expand on width of screen
  • none of columns expand way bottom
  • 3rd column's inner columns using large-6 don't seem work

please fixing layout issue. thank you!!

i added width: auto , works

http://jsfiddle.net/qhoc/uufsf/2/


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -