It's been a pretty long day and I'm lost, it's been a while since I've done much web design work and I've mainly been doing PHP today but can anyone shed some light please?
http://dmajor.me.uk/test/testing-ground.html
I've got this HTML file:
And this stylesheet:Code:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mainprodbox"> <div class="mainprodboximg"> <div class="mainprodboxtitle"> <div class="mainprodboxbutton"> </div> </div> </div> </div> <div id="mainprodbox"> <div class="mainprodboximg">top <div class="mainprodboxtitle">middle <div class="mainprodboxbutton">bottom </div> </div> </div> </div> </body> </html>
The divs with that code are overlaying each other, I don't want them to do that, I want them to stack on top of each other with the set heights.Code:@charset "utf-8"; /* CSS Document */ #mainprodbox {float: left; width: 250px; height: 300px; border: 1px solid #000;} .mainprodboximg {min-height: 100px; background-color: #F00;} .mainprodboxtitle {width: 100%; min-height: 150px; text-align: center; background-color: #09f;} .mainprodboxbutton {width: 100%; min-height: 50px; text-align: center; background-color: #999;}
I want it to look like this:
Any ideas? I know I've probably missed something so simple.


LinkBack URL
About LinkBacks
Reply With Quote


