Fixed width Div and expandable floated side by side? - css

Question

Is it possible to have a fixed width div floated alongside a variable width div?
I would like to have a 80px image sit alongside a div that stretches to 100% of the remining width using dynamic content - the html would be a repeated version of below -
for example -
<div class="mediaImg">
<img src="#"/>
</div>
<div class="textArea">
blah blah blah
</div>
Thanks
Paul

Answer 1

you have to write like
#divleft
{
background-color:red;
width:80px;
height:80px;
float:left;
}
#divright
{
background-color:blue;
overflow:hidden;
height:80px;
}
In this example of you give padding & margin to #divright. there is not effect in the layout structure.
check this http://jsfiddle.net/sandeep/u2sQD/1/

Answer 2

Just apply float and an width on your fixed div:
div.fixed{
float: left;
width: 70px;
padding: 0 5px;
}
Live example: http://jsfiddle.net/nvgBm/

Answer 3

Yes. I would put them inside a container type div with position:absolute then the two div's having relative positioning with float left.
<div class='container' width='100%'>
<div class='imgDiv'>
<img src='...'></img>
</div>
<div class='content'>
...content goes here
</div>
</div>
Then the css...
.container{
position:absolute
width:100%
height:100%
}
.imgDiv{
position:relative
float:left
width:80px
}
.content{
position:relative
float:left
}