Hi, this is my first post on here, so bear with me.

Ok, I'm working on a website, and I've run into a problem.

Essentially I want a border around two columns of text. But the border only wraps itself around whatever text is in the left column, so if there is more text in the right column than the left, there is text outside the border.

I made an image to explain a little better: goo.gl/XE70k

HTML:



CSS:



Can anyone help me out?

When you float div#rightside you remove it from the normal content flow. As far as div#border is concerned, div#rightside doesn't exist.

Here's an article that discusses the issue and offers suggestions:
http://complexspiral.com/publications/containing-floats/

Okay..... thanks.

I read that article and I sort of understand it... but I still don't really get what I should do.....

In such cases, I often use the Micro clearfix hack ( see http://nicolasgallagher.com/micro-clearfix-hack/ ) :


Add that to your CSS and add a class="cf" to your #border div:
<div id="border" class="cf"> ... </div>

Et voilà.

Meyer's first solution is the easiest to understand and maybe still the most common. You have a whole bunch of methods here.
http://css-discuss.incutio.com/wiki/Clearing_Space

The option with the clearer element is also the easiest to explain and understand. When you add an box with, say, clear: left after the floated boxes in the HTML it goes to the first spot that isn't affected by any left float. Since the clearer box is the normal flow the containing DIV "sees" it and is forced to contain it - and with it the floats.