CODEWITHSUNDEEP
css
J.Zil
J.Zil

Reputation: 2449

CSS - Correct Way of Creating a DIV grid

I am creating a forum style page which a row for each topic, and each line has four columns.

Since this is more of a layout rather than tabulated data, I have opted to use Div's for this. However, I am concerned about Divitius.

This is the way that I have found to do it: http://jsfiddle.net/XFUm9/

Is there a better, more efficient way of achieving this or have I done it correctly?

Upvotes: 0

Views: 1631

Answers (3)

Gandalf
Gandalf

Reputation: 13683

I made this fiddle http://jsfiddle.net/thiswolf/zVapK/

Here is the page

<!Doctype html>
<head>
<title>
Divs
</title>
<style type="text/css">
.right-rows{
float:right;
}
.green{float:left; margin-left:20px; background-color:green;}
.blue{float:left; margin-left:20px; background-color:blue;}
.purple{float:left; margin-left:20px; background-color:purple;}
.orange{float:left; margin-left:20px; background-color:orange;}
.grey{float:left; margin-bottom:20px; background-color:grey;}
.main{}
.row{width:900px;height:auto;}
.to-the-left{float:left;}
</style>
</head>
<body>
<div class="main">
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
</div>
</body>
</html>

Upvotes: 0

ramsinb
ramsinb

Reputation: 2005

I like Twitter Bootstrap - Scaffolding all the hard work is done for me. Alternatively 960 Grid is also good.

Upvotes: 0

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

I would suggest you look into an object-oriented css design since you will want to fit structures to different sizes in different scenarios 

.left { float:left; }
.right { float: right }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

and so on...

I promise you this approach will reduce your styling by a lot resulting in higher performance.

see: https://github.com/stubbornella/oocss/wiki/ (object-oriented CSS)

Upvotes: 1

Related Questions