Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS layout with left column fixed and right column fluid?

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>
like image 720
Dancer Avatar asked Nov 23 '11 17:11

Dancer


1 Answers

.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).

like image 133
Samich Avatar answered Sep 28 '22 06:09

Samich