Help with floats please

Get Started
1

Hi,

I created a simple div container that holds 3 divs with floats and I can’t figure out why the last div is falling below the others. I want then to line up three across.

I tried clearfix, overflow hidden…

Please can you tell me what I am doing wrong?

Thank you!
Meryl

http://tinyurl.com/25h6xhu

2

your css has three classes ad, ad1, ad3.
your html has two classes ad and ad3, and a div with the ID of ad


<body>

<div id="wrapper">

<div class = "ad">
<img src="http://merylrandman.com/conde_ads/img/test.gif" width="160" height="600"  border="0">
</div>
<div id="ad1">
<img src="http://merylrandman.com/conde_ads/img/test.gif" width="160" height="600"  border="0">
</div>

<div class = "ad3">
<div class="clearfix">
<img src="http://merylrandman.com/conde_ads/img/test.gif" width="160" height="600"  border="0">
</div></div>
</div>

</body>

So start by changing that id=ad1 to class=“ad1”
Your clearfix is also in a strange place - just remove that div.

3

I would like to add too Dr John’s observation, that I wonder what you would like to do with those images in your html. Are this just test image as the name suggest and are you gonna replace those images with other ones where text is included? I’m not sure where your heading?

But if you would like to have equal height columns, you don’t need have those images in the first place, and it’s not a good idea to set a fixed height either. Here is how you could do things. Note I have added a temporary min-height to illustrate what I mean:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
#wrapper {
	width:640px;
	margin: 40px 0 0 40px;
	position: relative;
	overflow: hidden;
}

.ad {
	width:160px;
	min-height: 600px;
	margin-right:80px;
	position: relative;
	float:left;
	z-index: 1
}

.last {
	margin-right: 0;
}

.ad h1 {
	padding: 5px 5px;
	font-size: 14px;	
}

.ad p {
	margin: 10px 5px;
	font-size: 12px;	
}

.ad h1 + p {
	margin-top: 0;	
}

.col {
	width: 160px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	background: #FF7FB1
}

.middle {
	left: 240px;	
}

.right {
	left: 480px;	
}

* html .col {
    top: 0;
    bottom:auto;
    height:999em;
    clear:both;
}

</style>
</head>

<body>
<div id="wrapper">

<div class="ad">
<h1>Column 1</h1>
<p>Phasellus mi massa, consequat quis gravida id, condimentum non mauris. Aliquam consequat nibh ac nulla porttitor imperdiet suscipit magna rutrum. Praesent turpis ante, fermentum vel mollis nec, imperdiet dictum dolor. Vestibulum vulputate nisl nec est tempor placerat. Nullam congue varius imperdiet. Donec porta sapien nec dui lacinia pulvinar. Cras ut dui leo, nec accumsan nisl. Cras sit amet nunc mauris, at mattis neque.</p>

<p>Nunc rutrum nibh eu dui tincidunt quis dictum dolor lobortis. Quisque dignissim sapien nec nulla varius ut accumsan lectus mollis. Morbi vel tortor tortor, eu imperdiet turpis. Vivamus tempor tincidunt ligula vel volutpat. Duis lacus magna, placerat ut pharetra at, vestibulum eu erat. Aenean venenatis nisl vitae leo auctor vel sodales velit mollis. Phasellus pharetra, est quis iaculis mattis</p>
</div>

<div class="ad">
<h1>Column 2</h1>
<p>Nunc rutrum nibh eu dui tincidunt quis dictum dolor lobortis. Quisque dignissim sapien nec nulla varius ut accumsan lectus mollis. Morbi vel tortor tortor, eu imperdiet turpis. Vivamus tempor tincidunt ligula vel volutpat. Duis lacus magna, placerat ut pharetra at, vestibulum eu erat. Aenean venenatis nisl vitae leo auctor vel sodales velit mollis. Phasellus pharetra, est quis iaculis mattis</p>
</div>

<div class="ad last">
<h1>Column 3</h1>
<p>Phasellus mi massa, consequat quis gravida id, condimentum non mauris. Aliquam consequat nibh ac nulla porttitor imperdiet suscipit magna rutrum. Praesent turpis ante, fermentum vel mollis nec, imperdiet dictum dolor. Vestibulum vulputate nisl nec est tempor placerat. Nullam congue varius imperdiet. Donec porta sapien nec dui lacinia pulvinar. Cras ut dui leo, nec accumsan nisl. Cras sit amet nunc mauris, at mattis neque.</p>
</div>
<div class="col"></div>
<div class="col middle"></div>
<div class="col right"></div>
</div>

</body>
</html>
4

Thank you Dr. John.