SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    quasi 2 columns: negative margin, float, clear?

    Code:
    [2]      [1]
    [4]      [3]
    [5]
    I need some help getting my head around this. Each of the brackets represents a paragraph, and the number their order in the source code. I want to make a quasi 2 column layout from the paragraphs without actually having two full columns, so I can be flexible with the order. The left ones have a % width, and so do the right ones, and for now I am achieving this by floating the ones on the right to the right. The thing is I want the tops of the paragraphs that are side by side to line up. However, I realized that if [1] is taller than [2], then [3] not go under [1], because [4]'s position has nothing to do with [1] (it won't be pushed down automatically).

    Is there a smarter way of doing this layout that doesn't require additional styling on the containing element (except for maybe position), or wrapping a DIV around 2 paragraphs that I want to be next to eachother and doing clear:right?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Am assuming that as long as the TOPS between pairs align you are content ( keep in mind some white space at the bottom will need to happen for this to occur anyway) and that you container hold only Ps ( or at least the last element is a P) you could just do this:

    Code:
    			p{float:right; width:50%; outline: 1px solid pink; }
    			p:nth-child(2n+1){clear:right }
    			p:last-child{float:left;}
    
    
    <div>
        <p>1<br>Lorem ipsum dolor <br>Lorem ipsum dolor sit amet, </p>
        <p >2<br>Lorem ipsum dolor</p>
        <p>3.</p>
        <p>4</p>
        <p>5<br>Lorem ipsum dolor sit arum</p>
    </div>
    Floating the items right would put them in the order you want (2,1,4,3...) almost, as the last P will then go on the right, thus we target the last:child float it left. This works consistently even if you were to have an even # of Ps.


    Hope that helps.


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
  •