Height Messed Up with Float

Gafaddict · June 15, 2007

Hey,

I've been working on a site design, and in the process, I came across a problem.

The main section of the page has a floating box on the right, and as you can see, that section doesn't expand all the way down to the bottom of that floating box. I tried adding a div at the bottom with the "clear: right;" attribute (tried clear: both as well), but when I did that, all the other text on the website disappeared in I.E. I also tried using min-height, but IE didn't seem to interpret that properly.

Am I doing something wrong? I was under the impression that a div with a floating object in it would expand down to that floating object...

Here's the code, if needed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page</title>

<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
background-color: #444444;
color: #FEFCFE;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
margin: 0;
padding: 12px 0;
font-weight: bold;
text-align: right;

}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 0 20px;
line-height: 19px;
color: #aaaaaa;
}
h3 {
padding: 0 30px;
}
p {
line-height: 17px;
margin: 12px;
}
a, a:link, a:visited {
color: #9DA4BF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#wrapper {
width: 90%;
margin: 0 auto;
}
#logo {
background-color: #6C7079;
border: 1px solid #000000;
border-bottom: none;
padding-right: 20px;
margin-top: 5px;
background-repeat: repeat-y;
}
#mainmenu {
font-size: 12px;
text-align: center;
margin: 0;
border: 1px solid #000000;
border-bottom: none;
padding: 1px;
background-color: #424E5B;
}
#mainmenu li {
display: inline;
margin: 15px;

}
#content {
padding-left: 10px;
border: 1px solid #000000;
padding-bottom: 5px;
background-color: #5A6674;
min-height: 420px;
}
#sideboxes {
float: right;
margin: 15px;
width: 150px;
border: 1px solid #000000;
margin-top: 20px;
padding: 3px;
}
#footer {
margin-top: 20px;
clear: both;
padding: 5px;
border: 1px solid #000000;
text-align: center;
background-color: #424E5B;
}
.sidebox {
text-align: center;
}
.sidebox .head {
font-weight: bold;
font-size: 12px;
line-height: 30px;
}
.newsarticle {
padding: 0 40px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="logo">
	<h1>Name</h1>
</div>
<div id="mainmenu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Forums</a></li>
		<li><a href="#">F.A.Q.</a></li>
		<li><a href="#">About Us</a></li>
	</ul>
</div>
<div id="content">
	<div id="sideboxes">
		<div class="sidebox">
			<span class="head">Header 1</span><br />
			<img src="images/noir_avatar.jpg" />
		</div>
		<div class="sidebox">
			<span class="head">Header 2</span><br/>
			Item 1<br />
			Item 2<br />
			Item 3<br />
			Item 4<br />
			Item 5<br /><br />
		</div>
		<div class="sidebox">
			<span class="head">Header 3</span><br />
			Item 1<br />
			Item 2<br />
			Item 3<br />
			Item 4<br />
			Item 5
		</div>
	</div>

	<div class="newsarticle">
		<h4>Article Title</h4>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In laoreet auctor lectus. Morbi ut orci. In diam mi, congue id, convallis ut, vulputate eu, ipsum. Nam id nisl sed sapien venenatis vulputate. In hac habitasse platea dictumst. Sed tempor imperdiet felis. Vestibulum hendrerit, massa tincidunt porta vulputate, nisl justo tincidunt pede, vitae varius ligula mi sit amet magna. Nunc aliquet. Phasellus id turpis sit amet felis iaculis facilisis. Praesent porta pede sit amet augue. Nulla velit tellus, molestie ut, facilisis quis, nonummy at, eros. Donec nec enim ac mauris gravida ultricies. Pellentesque venenatis lobortis sem. Nam et ante at ante dapibus elementum. Donec ante neque, tincidunt ut, euismod a, pellentesque non, est. Pellentesque mauris. Curabitur lacus massa, consectetuer nec, interdum ut, dictum id, pede. Nullam laoreet.</p>
		<p align="right"><em><a href="#">0 comments</a></em></p>
	</div>

</div>
<div id="footer">
	Footer text
</div>
</div>
</body>
</html>

jcombs_31 · June 18, 2007

You'll need to use the clearfix hack. http://www.positioniseverything.net/easyclearing.html

Sign In

Height Messed Up with Float

Recommended Posts

Gafaddict

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information