div not full width

Question

I have two div's like this

<div id="left"><p>.....</p><br/>
<p>.....</p>
</div>
<div id="right"><img ..../></div>

And I have css.

#left
{
position: relative
float: left;
}


#right
{
position: relative
float: right;
}

right div doesn't float to right, because p elements in left doesn't give space for right div element, but in CSS I doesn't set P's something like this width: 100%. How to make left width flexible? I don't know image width, so I can't set fixed width's on both div's.

Answer 1

p is a block element, so its 100% width is somewhat default. You can set its width to another value, or have just the image floated and p not floated (so it will work how float is supposed to work).

Answer 2

You'll have to set the width of #left or else this won't work out. As a workaround, I suggest putting the #right div tag inside left, and float it right. In your simple example, it works out well.

Other options would be to use Javascript. You can get the width of your image when it loads, and then set the widths accordinly, but that is kinda ugly.

Answer 3

Non-floated, block elements will act as "ceilings" for floated elements that appear below them. Basically, try something like this:

<div>
    <div id="right"><img .../></div>
    <p>......</p>
    <p>......</P>
</div>

Answer 4

This question seems to be a good one to ask over at Doctype.