CSS layout with left column fixed and right column fluid?

css fluid-layout

Dancer · Nov 23, 2011 · Viewed 9.2k times · Source

Is there a solid cross browser solution for fixed and fluid CSS columns? I need one column to be fixed on the left hand side, and another column to be fluid on the right hand side.

Below is a snippet of my code - .promoImg and .promoContent float alongside one another. #recommends is 90% of the browser width, .promoImg needs to fix at 120px and I'd like the .promoContent to stretch fluid.

<div class="promoBlock ">
    <div class="promoImg">
        fixed content 300px
    </div>
    <div class="promoContent">
        fluid content
    </div>   
</div>

Answer

.promoBlock { width:90%; margin:auto; } 
.promoImg { width:300px; float:left; background-color:red; }
.promoContent { margin-left:300px; background-color:green; }

Code: http://jsfiddle.net/P4RBj/

P.S: Didn't get promoblock needs to fix at 120px. If so, your inner div is wider (300px).

CSS layout with left column fixed and right column fluid?

Answer

Related questions