Hi,
I’m pretty new to using CSS boxes for layout. I’ve built a simple site using it and it worked pretty good for my purposes but it was pretty simple. My client now wants an Events page that has a much more complicated layout. I have attached a basic sketch of how the layout is supposed to be. The content will also be constantly changing so the boxes have to work together. I thought I could do this with multiple float DIV’s but its not working.
Here is the basic frame work I have that is working for the header, nav and footer and then where the content needs to go inbetween.
<body>
<div id=“container”>
<div id=“navBarContainer”>NAVIGATION HERE</div>
<div id=“header”>HEADER HERE</div>
<div id=“mainContent”>WHERE I WANT THIS NEW LAYOUT TO BE</div>
<div id=“footer”>FOOTER HERE</div>
</div>
</div>
Please let me know if you have suggestions on how to accomplish this layout. I dont even know if I should be using float, or absolute boxes. I’m just not sure. Like I said I thought the answer was the float boxes stacked but its not working. Here is the structure for what I was trying to do with the float boxes that isnt working. I dont know if I’m close or way off. Please let me know.
<body>
<div id=“container”>
<div id=“navBarContainer”>NAVIGATION HERE</div>
<div id=“header”>HEADER HERE</div>
<div id=“mainContent”>
<div class=“floatBoxLeft”>Image Here</div>
<div class=“floatBoxRight”>Events Text Here</div>
</div>
<div id=“mainContent”>
<div class=“floatBoxLeft”>Highlights Text Here</div>
<div class=“floatBoxRight”>Image 2 Here</div>
</div>
<div id=“footer”>FOOTER HERE</div>
</div>
</div>
That was as far as I had gotten, I didnt attempt to do the other boxes because these werent even working. I tried putting <br class=“clearfloat” /> if a few different places but it doesnt matter. The float boxes are overlapping the Header a little and are going out of the other boxes all together into the body color.
Please help!!
