Some css problems..

Tanax · 04-09-2008, 03:30 PM

Hey!

I have this:
Untitled Document

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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="includes/gfx/poems.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="content">
	<div class="poemContent">
		
		<div class="poemContentPoem">
			GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
		</div>
		
		<div class="poemContentTitle">
			<h1>Best mom</h1>
			<strong>To : Mom</strong>
		</div>
	
		<div class="poemContentDesc">
			<h2>Description:</h2>

			Wrote this just now
		</div>
	
</div>
</body>
</html>

And as you see, the inner right box is overlapping the outer big box, and I don't want that. I want the outer to expand together with the inner ones..

Here's the css:

Code:

.poemTitle {
	
	text-align: center;
	border-bottom: 1px solid #000;
	font-size: 20px;
	font-weight: bold;
	
}

.poemDesc {
	
	text-align: center;
	font-weight: italic;
	padding: 20px 10px;
	
}

.poemInfo {
	
	text-align: center;
	border-top: 1px solid #000;
	
}

.poem {
	
	border: 1px solid #000;
	width: 230px;
	float: left;
	margin-right: 8px;
	margin-bottom: 15px;
	
}

.poemContent {
	
	border: 1px solid #000;
	padding: 10px;
	
}

.poemContentPoem {
	
	float: right;
	text-align: left;
	width: 660px;
	border: 1px solid #000;
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	
}

.poemContentTitle {
	
	width: 450px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 1px solid #000;
	padding-bottom: 10px;
	
}

.poemContentDesc {
	
	width: 450px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	text-align: center;
	padding-bottom: 20px;
	
}

.poemContentDesc h2 {
	
	padding-top: 5px;
	text-decoration: underline;
	margin-top: 0;
	font-size: 15px;
	text-align: center;
	
}

THanks in advance!