www.webdeveloper.com
Results 1 to 5 of 5

Thread: issue with floating divs into columns

  1. #1
    Join Date
    Feb 2012
    Posts
    102

    issue with floating divs into columns

    Hey guys,

    I am having a small issue that I cant seem to figure out. I am making three columns with css and they are lining up great except for the fact that after a couple the lineup breaks and there is a line with only one div then it start the next row with three again. For those of you who are confused that understandable and I have included a screen shot. Here is my css. If anyone can help me remedy this issue so all rows have three that would be great.

    Code:
    div.photo {
    		margin:10px 0;
    		margin-left:2.5vw;
    		width:30%;
    		float:left;
    	}
    Attachment 15769
    Owner of Reality TV Addict
    Publisher of Strategies for Stretching Your Income (ebook)
    CEO and Founder of Sport Directions
    Follow me at @RealityTV_Forum

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    Your attachment doesn't come up for me. Can you post a link to your page so we can see the whole thing?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Feb 2012
    Posts
    102

  4. #4
    Join Date
    Aug 2012
    Posts
    155
    If you apply a border around your photo div you will see that some divs are higher than others and this will always throw out a layout like this. There you need to specify a minimum, maximum or set height for the photo div

  5. #5
    Join Date
    Feb 2012
    Posts
    102
    Thanks,

    simplypixie you answer fixed the issue. I should have thought of that, as you can tell it was a long night last night.
    Owner of Reality TV Addict
    Publisher of Strategies for Stretching Your Income (ebook)
    CEO and Founder of Sport Directions
    Follow me at @RealityTV_Forum

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles