Combining fixed and relative widths

[hessodreamy]

I'm sure this is very easy but I can't think how to do it.
How do I position something with a fixed width (eg a picture) on the page, and put something next to it (eg text) and tell it to fill the rest of the page, whatever size that might be?
This issue pops up from time to time. Presently I'm positioning an iframe next to a div. I want the div fixed width and the i frame to fill up the rest of the page.
Any help much appreciated.

[herkalees]

An iFrame is a box and cannot wrap around an image. Text on the other hand isn't a box (unless its in it's own div) and can easily wrap around an image like this...

<p><img src="yay.jpg" alt="picture of a yay" style="float:left; margin:0 10px 10px 0;" />Text text text text text text text text text text text</p>

[hessodreamy]

I should have been clearer. I don't want anything to wrap around the image. I just want it (an iframe, or div, or whatever) to fill the remaining width of the page.

[hessodreamy]

I guess what I'm really asking is how to replicate something like this:

Code: Select all

<table width="100%">
<tr>
<td width="150"><img src="blah.jpg" width="150"></td>
<td>lots of text</td>
</tr>
</table>

Where the left cell is fixed and the right will be as wide as the rest of the screen.
But to do it without using tables.

[masonbarge]

Set the width of a container div at a percentage (like 95%) and float the left div at a stated width, either in pixels or ems. The right column will fill the container. You don't want to use relative positioning, because if the center column is longer than the left one, this will cause it to flow under the left one. Just set a fixed left margin for it and leave positioning at the static default.

Code: Select all

#wrap {width: 95%;}
#leftcol {width: 160px;  float: left;}
#maincol {margin-left: 162 px;}

This will shrink the main column as the page gets smaller. AFAIK you could set the leftcol at a % and they both would shrink.

[hessodreamy]

That's the trick!
I've used a similar method before and it ended up a bit shoddy, but this works great.
Thanks for the help!