Looking to create a grid with div/section in percentage format, while maintaining consistent margins throughout. See an example here:
I have code that works with margin set to 1px, but I want to adjust it to use a margin of 1em or around 10px. How can I achieve this?
Here is the HTML:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
</head>
<body>
<div class="box small"></div>
<div class="box small"></div>
<div class="box small"></div>
<div class="clear"></div>
<div class="box small"></div>
<div class="box large"></div>
</body>
</html>
And the CSS:
.box {
height:50px;
margin:1em;
background:#000;
float:left;
}
.small {
width:33%;
}
.large {
width:66%;
}
.clear{
clear:both;
}