Question

Here is my css:

<style type="text/css">
    .column_n {
        margin: 20px;
        float: left;
        width: 250px;
    }
</style>

The problem is I get a column in the left of the page. But after the element on the leftside finished, the text on the other div starts filling below it. Something like this:

xxxxxx yyyyyy
xxxxxx yyyyyy
xxxxxx yyyyyy
xxxxxx yyyyyy  
yyyyyyyyyyyyy
yyyyyyyyyyyyy

What I want is:

xxxx yyyy
xxxx yyyy
xxxx yyyy
     yyyy
     yyyy

How Can I accomplish this?

Thank you!

Html code:

<div class="column_n"> 
    xxxxxxxxxxxxxxxxxxxxxxxxxxx 
</div>
<div> 
    yyyyyyyyyyyyyyyyyyyyyyyy 
</div>

Answer 1

I did it like this:

.column_n {
margin: 20px;
float: left;
width: 250px;
}

.column_b {
left: 290px;
position: absolute;
}