This code:

```
  <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>

```

Is coded with this css:

```
   #columns {
        width: 200px;
        float: left;
        margin-left: 20px;
        margin-right: 20px;
    }

```

The problem is that if I put any text below the three columns created, it just adds another column! I want the footer to be below these columns, but I can only do this so far by setting this:

```
footer {
    /*height: 50px;*/
    text-align: center;
    position:absolute;
    bottom:0;
}

```

And this just makes the page longer, i.e. puts a huge gap between this content and the footer.
Any solutions?

Thanks