Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Float problem

  1. #1
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Hey Guys,

    The problem can be seen here: Portfolio - Collossal Pixel The Portfolio of Ali Hitch

    Each .porfolio-item is brought in through Wordpress via PHP. This means that there are multiple Divs with the same class but with different content inside.

    What I am trying to do, is equally spread out 3 Divs on each 'row' so to speak.

    Dimensions are shown below.

    .p-wrap {
    width: 960px;
    }

    .portfolio-item {
    width: 270px;
    float: left;
    margin-right: 75px;
    }

    I have floated each .portfolio-item left and then added in a margin-right of 75 to produce the gap.

    This works well for the first 2 elements, but the third is forced down to the 2nd 'row' because it does not fit onto the line. Putting in the margin-ritight was the only way I could think of to get that spacing between each element.

    Obviously this hasn't worked.

    I have provided an image as well to try and help explain the situation. All can be clearly seen using Firebug in FF.

    Image can be found here: http://www.collossalpixel.com/work/p...planartion.jpg

    Hopefully I have explained this well enough and somebody is able to help ...

    Many Thanks,
    Ali
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    There are a couple of ways to do this. You have to assign a class to the last item in the row so that you can reset the margins. In order to do this you have to either use a modulus operator in your WordPress Loop, or crawl the DOM with JavaScript and use a modulus operator to append a class on every third item.

    Horizontally Sequenced Display Order for WordPress Posts in Two Columns

  4. #3
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Wow, not simple! Great find though

    I'll give that a go tomorrow when my mind is a little fresher.

    Thanks,
    Ali
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com