Why won't my divs align?

Question

Ok, I've tried everything. I've floated divs before successfully, and have researched continuously. Would someone please take a look at my code and tell me what wrong? Thank you very much.

I've tried varying the div width, played around with positioning types, and messed with display properties. I can't think of anything else to fix this.

The problem is located at the footer of this site:

http://caprettacbc.com/index2.html

HTML:

<div id="footer">
<div id="footermain">

<div id="f1">
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="f2"><h1>Contact</h1>
7553 Estate Ave.<br />
Hudson, Ohio  44236<br /><br />
Office: (330) 425-1553<br />
Mobile: (440) 823-8498<br /><br />
<a href="mailto:fred@caprettacbc.com" class="class1">fred@caprettacbc.com</a> 

</div>
<div id="f3"><p>Feel free to fill out a contact form to learn more, and recieve a <b>free         eBook</b> and <b>free one-hour consultation</b>. Click below to fill one out.</p><br />
<a href="contact.php" border="0"><img src="images/Contact_form_button.png" width="180"    border="0"/></a>
</div>

</div>
</div>

CSS:

#footer  {
font-family: 'Sintony', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;}

#footer #footermain  #f1 {
margin: 0px;
float: left;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

#footer #footermain  #f2 {
margin: 0px;
float: left;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

#footer #footermain  #f3 {
margin: 0px;
float: right;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

#footer #footermain {
height: 400px;
width: 950px;
margin-right: auto;
margin-left: auto;}

hmmm just another bullshit question...in fact i guess that you want div f1 f2 f3 horizontally aligned, right ? — user2196728, Dec 03 '13 at 02:09
I think you should consider position:relative, avoid the use of "auto" in Height, and clear line feed in all your div — user2196728, Dec 03 '13 at 02:22
Why did you put a JavaScript tag on your question? What on earth does this have to do with JavaScript? — Blue Skies, Dec 03 '13 at 02:25
@Blue Skies : this is like fishing : more to eat more to fish ;) ;) — user2196728, Dec 03 '13 at 02:27

score 1 · Answer 1 · answered Dec 03 '13 at 02:18

The reason this is happening is because something in your #maincontenttext is hidden, but pushing down below, into the footer, causing your floats to sit somewhere else.

This is occurring in #capabilities: if you set overflow: hidden; to it, your footer sits back in the spot you want.

As for why this is happening, it's it bit more messy to answer. There's a float inside #capabilities that is causing this. Setting overflow: hidden; might fix it for the now, but it might also mean breaking something else in the long run (it's a type of clearfix hack, but with fixed width and height, will mean problems if your container gets taller and you have no idea why stuff is getting clipped off.)

You can apply a clearfix to your #capabilities which is probably the safest option, affording #capabilities some extra height if it needs it, and also the footer stays pristine. Search clearfix for more info.

A common clearfix:

#capabilities:after { display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ' '; }

This does need to be combined with IE 6- & 7-only code:

IE 7:

#capabilities { min-height: 100%; }

IE 6:

#capabilities { height: 100%; }

user2196728 · Answer 2 · 2013-12-03T02:42:24.420

I guess that this do the job, if you clear your "empty" line feed into your divs, as far as they can be managed using a css way, using margin or padding :

<!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=utf-8" />
<title>Document sans nom</title>
<style>
#footer  {
font-family: 'Sintony', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;}

#footer #footermain  #f1 {
    margin: 0px;
    float: left;
    height: 300px;
    width: 300px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
}

#footer #footermain  #f2 {
    margin: 0px;
    float: left;
    height: 300px;
    width: 300px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
}

#footer #footermain  #f3 {
    margin: 0px;
    float: right;
    height: 300px;
    width: 300px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
}

#footer #footermain {
height: 400px;
width: 950px;
margin-right: auto;
margin-left: auto;}
</style>
</head>

<body>
<div id="footer">
<div id="footermain">

<div id="f1">
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="f2">
  <h1><br />
<a href="mailto:fred@caprettacbc.com" class="class1">fred@caprettacbc.com</a> 

</h1></div>
<div id="f3">
  <p><br />
    <a href="contact.php" border="0"><img src="images/Contact_form_button.png" width="180"    border="0"/></a>  </p>
</div>

</div>
</div>
</body>
</html>

Why won't my divs align?

2 Answers2