Doing this as a class group project, I'm doing the front end while other members are doing the backend. I'm using the 24 columns 960 grid system, to try and position everything. It is my first time really doing a project using CSS and the 960 grid system.
I'm using javascript to include other html files.Excluding the header and footer, I created 6 divs for the main content area and want each div to include a different html file. 2 Rows of 3 divs.
The problem I have come across is that the divs are stacking ontop of each other and I cant really control how wide each div is even though i gave it a grid_8 class. On top of that they are stacking ontop of each other, and it gets cut off at the bottom even after I scroll down. I also want to make the footer stay at the bottom but instead of being fixed on the bottom of the browser at all times I want to scroll all the way down to be able to see it.
Here is what it looks like atm, I gave borders to the divs so you can see how they are stacking http://i53.tinypic.com/2lbzgp.png I have also put <div id="clear"></div>
into the header.html and footer.html files
Any help is appreciated, been driving me nuts for the past week.
EDITED again Don't know if I did this right, but here is the code http://jsfiddle.net/RZtXu/3/