I've avoided using grids in CSS layouts for the most part. Whenever, looked into them, it always seemed more prescriptive than it should be. Below is an example of a grid system using the div tag which I hope, seems relatively straight forward. All columns are floated to the left. The '.first' class clears left so that it moves to a new row. I made a slight adjustment to the three column row so that it would be pixel perfect with the others by using the first column 1 pixel shorter. This is something which you need to take into account with columns which don't divide to a whole number.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
margin-bottom:10px;
background:#CCCCCC;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
</style>
</head>
<body><br />
<div class="twoCol first">
Two col
</div>
<div class="twoCol">
Two col
</div>
<div class="oneCol first">
One col
</div>
<div class="threeCol first">
Three col
</div>
<div class="threeCol">
Three col
</div>
<div class="threeCol">
Three col
</div>
</body>
</html>
No comments:
Post a Comment