6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Kind of complicated CSS layout issue with Wordpress?

by pennyroll
5 replies
  • WEB DESIGN
    • |
I've expanded the center column to fit 3 post side by side using the "float: left" property. When the left aligned posts hit the right side they wrap to a new line and create a new row of posts. Because the posts have variable heights they leave a gap above. How can I align the post so they float left and "top"

Here is a picture that illustrates what I am trying to accomplish.

Thanks for any help
#complicated #css #issue #kind #layout #wordpress
  • Profile picture of the author ronc0011
    I think you may have to use the "clear" attribute though I'm not altogether sure that's going to help in your particular application. Just Google CSS clear
    {{ DiscussionBoard.errors[6861962].message }}
    • Profile picture of the author pennyroll
      Originally Posted by ronc0011 View Post

      I think you may have to use the "clear" attribute though I'm not altogether sure that's going to help in your particular application. Just Google CSS clear
      I've tried clear and unfortunately it didn't work. I'm using infinite scroll which makes it even more complicated. If I could somehow make the posts aware of each other vertically instead of horizontally I would be set. Thanks for the suggestions though.
      Signature
      Pennyroll.com
      Tips to make money that work!
      {{ DiscussionBoard.errors[6862068].message }}
  • Profile picture of the author ronc0011
    looking at your illustrations what you want would in browser speak would be three columns. I suppose you could arrange it by div's I suppose you could apply a max-width to your "p" tags but honestly I don't think is going to work either. What you're trying to do is a function of columns. I don't think there is a way around that. Even the div idea is just a way of managing the columns
    {{ DiscussionBoard.errors[6862003].message }}
  • Profile picture of the author clickbump
    Hi Pennyroll, unless each of your columns is an a separate container (<div class="column one">box,box,box</div><div class="column two">box, box, box</div>), there is currently no way to do what you want purely in CSS.

    You will need to utilize some javascript or use a pre-scripted solution like Masonry (Jquery based) > jQuery Masonry

    For a comprehensive overvlew of float positioning, I'd also recommend Smashing Magazine's excellent article > CSS Floats, Things You Should Know

    Now, assuming that you do have enough control over the floats so that you can place them into separate divs, here's an example to do what you want:

    Code:
    <div class="container">
    <div class="left box-container">
        <div class="box" style="height:50px;">1</div>
       
        <div class="box" style="height:100px;">2</div>
       
        <div class="box" style="height:50px;">3</div>
        
    </div><!-- left-box-container -->

    <div class="right box-container">
        <div class="box" style="height:100px;">4</div>
      
        <div class="box" style="height:60px;">5</div>
      
        <div class="box" style="height:70px;">6</div>
        
    </div><!-- right-box-container -->

</div>​
    And here's the CSS to make it float:

    Code:
    .box {background:blue; color:#ccc; width:100px; margin: 0 0 5px 0;}
.left {float:left;}
.right {float:right;}
.container {width:200px;}​
    Signature
    {{ DiscussionBoard.errors[6862401].message }}
    • Profile picture of the author pennyroll
      You will need to utilize some javascript or use a pre-scripted solution like Masonry (Jquery based) > jQuery Masonry

      Because of the infinite scroll plugin that I'm using I won't be able to control the columns, I was thinking along the same lines of distributing through columns like you mentioned, but if I do then I will have gaps at the top of each "page" when infinite scroll kicks in and loads the next page.

      I think Jquery masonry is what I will need to use, that looks like exactly what I am looking for. I really appreciate you showing me this... Awesome.

      Time to hit the books!

      Thanks again!
      Signature
      Pennyroll.com
      Tips to make money that work!
      {{ DiscussionBoard.errors[6862563].message }}

Trending Topics