CODEWITHSUNDEEP
csshtmlfloating
user3059600
user3059600

Reputation: 9

Why won't my divs align?

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:[email protected]" class="class1">[email protected]</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;}

Upvotes: 0

Views: 108

Answers (2)

user2196728
user2196728

Reputation: 3037

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:[email protected]" class="class1">[email protected]</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>

Upvotes: 0

Ming
Ming

Reputation: 4578

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%; }

Upvotes: 1

Related Questions