Floats, I don't think I understand how they work

HTML & CSS
1

Okay, so I assumed floats would just casually fill in space both vertically and horizontally based on the content around it. I obviously don’t understand how it works.
http://cpradio.no-ip.info:12710/svn.cpradio.com/cpradio.com/testimonials

If you visit the site above (I am using Chrome), the floated sections are not responding how I would like vertically. So when you have two or three paragraphs horizontally, the 4th is appearing at the height of the largest paragraph in the first three that were floated. I’d prefer the 4th move up vertically to be almost immediately under the first paragraph.

I remembered that Pinterest does this and so I went there for “inspiration” only to be completely deceived. They are positioning each box with absolute left and top, and I’m sorry, but that is not a solution.

Anyone know how to accomplish this? (below is the CSS styles being implemented for this particular page)

div.pageContainer div.pageContent div.pageContentText div.singlecolumn blockquote
{
  float: left;
  width: 330px;
}

div.pageContainer div.pageContent div.pageContentText div.singlecolumn blockquote p:before
{
  display: block;
  font-size: 3em;
  content: "\\201C";
  height: 1px;
  margin-left: -.4em;
  position: relative;
  top: -.1em;
}

div.pageContainer div.pageContent div.pageContentText div.singlecolumn blockquote p:after
{
  display: block;
  font-size: 3em;
  content: "\\201D";
  height: 1px;
  margin-left: 98%;
  position: relative;
  bottom: .4em;
}

div.pageContainer div.pageContent div.pageContentText div.singlecolumn blockquote p
{
  padding: .5em 2em .5em 2em;
  text-align: justify;
}

div.pageContainer div.pageContent div.pageContentText div.singlecolumn blockquote cite
{
  display: block;
  font-style: italic;
  padding: 0 2.5em .5em .5em;
  text-align: right;
}
2

Yeah, floats don’t quite work like that. The only straightforward way to do this with current CSS is to create three floated div containers that represent three columns, and then manually arrange the articles that way inside each column.

3

:frowning: That saddens me. Guess I’ll just try and come up with a different way of showcasing the data.

I really wished CSS could handle this…

Thanks.

4

Is the content dynamically created? If not, it’s easy to do what you want, as I described above.

5

In the end, yes, it will be dynamically created. Right now it is hard coded for simple proof of concept

6

Ah, OK. To be honest, though, I don’t find it easy to read text in columns. It makes me tend to ignore the text. So even though it seems cool to be able to do it this way, it may be for the best if it isn’t easy to do.

In CSS3, there is the facility to break text into columns, bt it’s not well supported in browsers at this stage. You can also use JavaScript to break text into columns, which is more reliable.