I suspect this is stupendously easy but I can't get my head round it at the moment.
So I'm horribly misusing the box model to produce a page which "draws" boxes of different sizes (in this case it's heights) depending on various stats. So imagine producing those graphs they have in the Economist comparing country sizes in population and such.
Anyway the stripped down version of the page is here :
http://www.harriscrew.com/~dante/stripped.html
http://www.harriscrew.com/~dante/stripped2.html
http://www.harriscrew.com/~dante/stripped3.html
(all the same content, just with minor changes to see examples of the same problem)
The CSS is in the page. I know this won't work in anything but IE so don't even bother, that's not the concern at the moment.
What I'm trying to do is to get the "odd box" to start a new line completely instead of being slotted in wherever it'll fit. Obviously what you see is going to depend on a range of things and just in case you don't get what I mean here's a screen shot :
http://www.harriscrew.com/~dante/shot.jpg (the bolded item is the one I've got a problem with, obviously). I presume I could force in a paragraph break (or whatever) but as this is all done dynamically I want to know if there's a way of achieving it through changing just the style sheet. Similarly, splitting them into multiple DIVs isn't really an option what what I'm doing.
You ignore the links and the underlying content, that's all generated elsewhere - which is why the HTML is a bit horrific (there's about 8k errors, don't worry about that, I've c+p most of this from elsewhere so it's not going to make much sense). I just want to create a new "row" - without creating a new DIV, if that makes sense. To use an analogy with text, I want to put in the equivalent of a <br> I guess.
Any ideas? Apologies for the incoherence, it's late etc...