Two divs with wrapping text sharing the same line

Question

Simple problem - How do I get these two divs to share the same line:

<div style="width: 200px; padding: 0; background-color: #f00; float: left; display: inline; ">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0; float: right; display: inline; ">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>

EDIT: Additionally, I need the second (right) div to fill the remaining space, so setting width won't work in my case. Also, I need the right div to appear as a block, such that when it wraps, it begins flush with the beginning of the first line on the right div ("Cum sociis...").

Thanks in advance.

Answer 1

Drop the float:right; and the second display:inline;:

<div style="width: 200px; padding: 0; background-color: #f00; float: left; display: inline; ">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>

Answer 2

Make them both float left, you could also try putting the float right above the float:left.

If that doesn't work, try putting a width on the second division.

If that doesn't work, send us your page, there is something else wrong.

---

EDIT -- this is an alternative using absolute positioning

<div style="width: 200px; padding: 0; background-color: #f00; position:absolute;">Lorem ipsum dolor sit</div>
<div style="margin-left: 200px; padding: 0; background-color: #0f0;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis interdum leo nec purus eleifend ut laoreet metus varius. Praesent lobortis risus sem. Duis gravida risus convallis purus dapibus fermentum. Nulla nec arcu pellentesque justo hendrerit pulvinar id ac velit. Nulla cursus volutpat risus, id volutpat metus tempus eget. Morbi rhoncus, diam sed vestibulum elementum, odio nulla faucibus ligula, ut dapibus lorem nunc vitae purus. Nam commodo iaculis ultricies. Etiam in velit dolor, vel convallis tellus. Aliquam tincidunt, erat ac dictum varius, sapien mi faucibus est, sit amet venenatis nisl massa non turpis. Donec eget libero mauris. Cras ac magna est, id hendrerit est.</div>