Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
Blog Web Dev Fixed Column on Right, Fluid Column on the Left

Fixed Column on Right, Fluid Column on the Left

By Forrest Smith - Drempd.com

This code produces a 2-column layout, with a fixed column to the right, and a column to the left that fills the remaining space. To change the width of the right column, just adjust anywhere in the code below that has 250px to match whatever width you want (someday we’ll have variables in CSS!).

<style> 
       .left{ 
               float: left; 
               width: 100%; 
           } 
       .left_inner{ 
               background: red; 
               margin-right: 250px; 
           } 
       .right{ 
               background: yellow; 
               width: 250px; 
               float: right; 
               margin-left: -250px; 
            } 
       .clear{
               clear: both;
            }
</style> 

<div class="left"> 
         <div class="left_inner"> 
                 Left 
         </div> 
</div> 
<div class="right"> 
          Right 
</div>
<div class="clear"></div&g
Posted on December 21, 2013August 26, 2022 in Web Dev
  • Adventure

    • adventure
    • gravelgrinding
    • hiking
    • running
  • The Built Environment

    • architecture
    • urbanity
  • Locations

    • san diego
    • portland
  • Freelance Life

    • freelancing
    • productivity
  • Web Dev

    • css
    • entrepreneurship
    • git
    • handlebars
    • html
    • inkscape
    • photoshop
    • php
    • sass
    • web design
    • web development
    • saphire

drempd | san diego, ca


home contact

adventures san diego urbanity and architecture projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance