CSS - Divs I'm lost

**DannyM** · 17-03-2012, 12:40 AM

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:

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>

And this stylesheet:

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;}

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.

I want it to look like this:

Any ideas? I know I've probably missed something so simple.

**Steve** · 17-03-2012, 12:56 AM

You have two elements with the same ID - this is illegal and probably one of the first things to address.

Also you have no CSS reset. That's going to lead to some inconsistencies in certain browsers.

Due to consumption of port I cannot give sound advice, only point out errors. Hopefully somebody else will now jump to the rescue.

**DannyM** · 17-03-2012, 01:03 AM

Originally Posted by Steve

You have two elements with the same ID - this is illegal and probably one of the first things to address.

Also you have no CSS reset. That's going to lead to some inconsistencies in certain browsers.

Due to consumption of port I cannot give sound advice, only point out errors. Hopefully somebody else will now jump to the rescue.

I didn't realise the id issue but the problem still occurred when I used it as a class.

The only css resets I have ever used are margin and padding but I'm open to ideas/suggestions thanks

**Barakka** · 17-03-2012, 11:22 AM

It's because you've nested the <div>'s within each other, for what you've drawn you want

Code:

<div id="mainprodbox">
    <div class="mainprodboximg"></div>
    <div class="mainprodboxtitle"></div>
    <div class="mainprodboxbutton"></div>
</div>

**DannyM** · 17-03-2012, 01:25 PM

Originally Posted by Barakka

It's because you've nested the <div>'s within each other, for what you've drawn you want

Code:

<div id="mainprodbox">
    <div class="mainprodboximg"></div>
    <div class="mainprodboxtitle"></div>
    <div class="mainprodboxbutton"></div>
</div>

I feel like a complete idiot now, the phrase "sleep on it" has never been so true for me.

Thank you very much!

Thread: CSS - Divs I'm lost

LinkBack

Thread Tools

CSS - Divs I'm lost

Re: CSS - Divs I'm lost

Re: CSS - Divs I'm lost

Re: CSS - Divs I'm lost

Received thanks from:

Re: CSS - Divs I'm lost

Thread Information

Users Browsing this Thread

Posting Permissions