CSS layout with left column fixed and right column fluid?
Asked Answered
C

1

7

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>
Count answered 23/11, 2011 at 17:59 Comment(0)
T
18
.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).

Trenttrento answered 23/11, 2011 at 18:3 Comment(1)
cheers for that - simple and works a treat - sorry (regarding the promoblock quote) I mistyped above - I've now corrected the textCount

© 2022 - 2024 — McMap. All rights reserved.