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



    <!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>

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.


li + li {
    margin-left:5%;
}

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

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

:nth-child will work

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

yes, it is in fact the very NATURE of :nth-child to be able to apply simple math to selecting :slight_smile:

: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