I think there is only one thing you need to do:
That should do it.
Edit: Based on your edit I would suggest you use a span (an inline element) instead of a div (a block element). If you always need it to be on a separate line, you can give both that element and the element after it a clear:left.
You should specify the other column as float left. The way that you have it right now the text on the left is going to wrap the floated text on the right. It would also be wise to specify the size of the floated object on the left too.
<html>
<div style="width:400px">
<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div style="background-color:red; width: 250px; border:thin black solid">Some sample text
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></div>
</html>
Also, consider using CSS it will make this code much easier to maintain long-term<<
EDIT: I thought you wanted everything to be floated to the left I think I misunderstood your question. What you are trying to do is not possible. The best thing you could do is either specify the margin of the object floated to the right to be equal to 400-150 (250px), or specify the width of the "some text" object to be equal to (250px).
Here's one solution:
<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>
Basically the magic here is overflow: hidden, which changes the CSS visual formatting model. Take a look at CSS layout fundamentals, part 5: floats:
Fixing adjacent boxes
Let’s look at the red paragraph border problem first. The reason the paragraph border appears behind the image is because floats don’t reposition block boxes that are adjacent to them. In this example, the floated image is only pushing the line boxes inside the paragraph across. So the text is pushed to the right, but the actual paragraph box still stretches across the full width of the container.
The fix for this issue comes from a very well-hidden paragraph in the floats section of the CSS 2.1 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
So to prevent our paragraph block from overlapping the floated content, the solution is to create a “new block formatting context”, in CSS specification author terminology. Sounds tricky, eh? Fortunately, it isn’t that hard. New block formatting contexts are created by any block which meets these criteria:
- is floated
- is absolutely positioned
- has a display property value of one of more unusual flavours (inline-block, table-cell, etc.)
- has its overflow property set to something other than visible.
The last option is the one that is easiest to do in most cases: setting overflow: auto on our paragraph will create a new “block formatting context”, and render the paragraph border in the right place.