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>