SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,127
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)

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

    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....m/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)
    Code css:
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,127
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Is the content dynamically created? If not, it's easy to do what you want, as I described above.

  5. #5
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,127
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    In the end, yes, it will be dynamically created. Right now it is hard coded for simple proof of concept

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •