SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    stack items vertically so there is no white space

    I am working on a layout which has three columns per row in a div container, each column has pictures in it however each picture is also a different size as it might be positioned vertically or horizontally so basically I have columns like this 40%, 30% and 40% which gives me the total 100% and that is not a problem it renders properly the images are proportioned accordingly, my question is on the next row where the pictures differ in size and I want to be able to push the pictures up so they are stack very close to each other, to give an example here is a picture I have made the first one represents what I have and the second one what I want to achieve

    current.png
    new.png

    is it possible to do it with CSS or should I change the way I am creating the divs to contain all items from a column in one container and set the width to it?
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    is it possible to do it with CSS or should I change the way I am creating the divs to contain all items from a column in one container and set the width to it?
    Yes, yo need to create separate columns to do this. So, make each column a floated div, and that way things will stack nicely.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, yo need to create separate columns to do this. So, make each column a floated div, and that way things will stack nicely.
    Thanks, I was wondering how to, since I am getting all posts in an array, so I guess I just have to get the array index in three different ways that way the posts are ordered by date from left to right
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    Thanks, I was wondering how to, since I am getting all posts in an array, so I guess I just have to get the array index in three different ways that way the posts are ordered by date from left to right
    That might be a question for the PHP forum if you are having trouble. But another option might be to have the content in colored boxes that all have the same height. The page might look neater that way, too. I find columns like you are proposing pretty hard to read.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That might be a question for the PHP forum if you are having trouble. But another option might be to have the content in colored boxes that all have the same height. The page might look neater that way, too. I find columns like you are proposing pretty hard to read.
    As for the PHP I have no problems I was just trying to see if there was a way in CSS to do it so I did not have to modify the current code, and for the columns I can't really do anything as my client wants it that way and is mostly pictures so no much problem for the reading.
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    As for the PHP I have no problems I was just trying to see if there was a way in CSS to do it so I did not have to modify the current code
    I don't think so with CSS, but there may be more options with JavaScript, although that can start to get messy.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •