SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive 3 element layout

    Responsive 3 element layout

    Hi all

    I have a demo here - http://www.ttmt.org.uk/forum/

    I would like a responsive layout, with 3 elements spaced across the page.

    Each element has a percentage width and then a percentage right margin

    My problem is the margin on the last element pushs it down below the other two

    I can remove the margin from the last element and get the layout I want like this.

    http://www.ttmt.org.uk/forum/index1.html

    but this isn't really dynamic and the layout will go to 2 elements when the window size
    gets smaller.

    So how do I create a layout like this.

    http://www.ttmt.org.uk/forum/index1.html

    Code:
        <!DOCTYPE html>
        <html>
          <meta charset="UTF-8">
          <meta name="description" content="">
          <meta name="keywords" content="">
          <meta name="robots" content="">
          <title>Title of the document</title>
    
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    
          <style type="text/css">
            *{
              margin:0;
              padding:0;
            }
            html,body{
              height:100%;
            }
            body{
              background:#aaa;
            }
            ul{
              list-style:none;
            }
            #wrap{
              background:#fff;
              max-width:800px;
              margin:0 auto;
              min-height:100%;
              border-left:10px solid #aaa;
              border-right:10px solid #aaa;
            }
            li{
              height:100px;
              width:30%;
              float:left;
              margin:0 5% 0 0;
            }
            li:nth-child(1){
              background:#e24d4d;
            }
            li:nth-child(2){
              background:#b13c3c;
            }
            li:nth-child(3){
              background:#782828;
              margin:0;
            }
          </style>
    
          </head>
    
        <body>
    
          <div id="wrap">
    
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
    
          </div><!-- #wrap -->
    
    
        </body>
    
        </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    One technique you can try is to apply a left margin to all boxes after the first using the adjacent sibling selector instead of a right margin to all boxes.
    Code:
    li + li {
        margin-left:5%;
    }

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you could give the last element a class negating the margin. If IE8 and lower are not a concern, you could also use the :last-child selector ; Assuming the element is indeed the LAST ELEMENT in the parent container.


    BUT, why not adjacent sibling selectors , and move the right margin to the left?

    li { width:15em; }
    li+li { margin-left:1em; }


    no matter what you do however, if you have a query you will have to adjust margin for the new size screen. That is, unless you adjust it with your querried CSS, the margin will still be there when the layout adjust itself.


    hope that helps

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dresden_phoenix, ronpat thanks for your replies adjacent sibling would work but the elements would be part of of a grid, sorry I should have said that in my question.

    http://www.ttmt.org.uk/forum/index2.html

    I could select the last element in each line but thats not very dynamic. The elements would be created in a Worpress loop so I would need a system of mark each third elements with a different class name to then style.

    Here I have done it with :nth-child

    http://www.ttmt.org.uk/forum/index3.html

    I'll look now but is it possible to say every third child with :nth-child

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :nth-child will work

    li:nth-child(3n+3){
    margin-right:0;
    }

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    yes, it is in fact the very NATURE of :nth-child to be able to apply simple math to selecting

    :nth-child(3n) will do the trick.


    incidentally, it is also quite easy to code a counter into any WP loop. and add a class to the list item when ($count%3==0).

    EDIT: uggh... need to learn to type faster..lol


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
  •