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>