Creating a 3x3 Home Page

[MLGSmall]

Hey,

I am working on the home page of my website and I am trying to create a 3x3 grid layout where each module is the same dimensions just like the home page of http://fnatic.com/

I have created all of the different modules as you can see. Each of them is labeled according to what position they are supposed to be in. I can't manage to figure out how to have these modules positioned correctly. Instead, they are just vertically listed on the home page. Go to http://small.fm/ to see what I am referring to.

Thanks so much.

[WestWeb]

You could add a class to all of the divs like this:

<div id="top-center-module" class="floatbox">...</div>

Then use that class in your stylesheet to float the boxes all left like this:

.floatbox {
     float: left;
}

Then you'll notice the content below covers the boxes up. One way to deal with that is add an element below the boxes with a class, and apply clear: both; to the class. Something like this:

<br class="clear">

.clear {
     clear: both;
}

[MLGSmall]

You could add a class to all of the divs like this:

<div id="top-center-module" class="floatbox">...</div>

Then use that class in your stylesheet to float the boxes all left like this:

.floatbox {
     float: left;
}

Then you'll notice the content below covers the boxes up. One way to deal with that is add an element below the boxes with a class, and apply clear: both; to the class. Something like this:

<br class="clear">

.clear {
     clear: both;
}

Thank you so much! Works very well.