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>
.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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With