TalkPHP - View Single Post

Gareth · 04-10-2008, 08:47 PM

Tanax, as marxx said, you should clear:both.

For example;

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>

<style type="text/css">
.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 {
	display: block;
	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;
	
}

.clr { 
	
	clear: both; 
	
}
</style>

</head>
<body>
	<div id="content">
		<div class="poemContent">
			
			<div class="poemContentPoem">
				For all the times you've helped me,<br />
				I can't thank you enough.<br />
				You've always been an angel,<br />
				eventhough you also had it rough.<br /><br />
				
				You're one of my best friends, if not the best,<br />
				I just hope that you the same way feel.<br />
				Because you're special, you're not like the rest,<br />
				you can really help me heal.<br /><br />
			</div>
			
			<div class="poemContentTitle">
				<h1>Best friend</h1>
				<strong>To : Karolina</strong>
			</div>
		
			<div class="poemContentDesc">
				<h2>Description:</h2>
				I wrote this to a very good friend of mine, who's always been there for me.
			</div>
			
			<div class="clr"></div>
	        
		 </div>		
	</div>
</body>
</html>

Gareth