views:

249

answers:

2

I can't add top margin to footer that uses clear:both. Using padding seem to solve the problem. But it ruins the top solid border of the footer.

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Study at Best</title>
    <link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
    <link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.corner.js"></script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
    <div id="logo">
     <img class="imageCenter" src="images/logo.png" alt="Best School"/>
    </div>
    <div id="navigation">
     <?php include("navigation.html"); ?> 
    </div>
    <div id="header">

    </div>
    <div id="left-column">
     <h2>left-column</h2>
     <p>
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.  
     </p>
    </div>
    <div id="main-column">
     <h2>main-column</h2>
     <p>
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     </p>
    </div>
    <div id="right-column">
     <h2>right-column</h2>
     <p>
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
     </p>
    </div>
    <?php include("footer.html"); ?>
</div>
</body>
</html>

footer.html:

<div id="footer">
<a href="#">Home |</a>
<a href="#">About Us |</a>
<a href="#">Contact Us |</a>
<a href="#">Menu Item 4 |</a>
<a href="#">Menu Item 5 |</a>
</div>

style.css:

/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 { 
    font-style: normal;
    font-size: 1.0em; 
    padding: 5px 10px;
    margin-bottom: 10px;
    color: #FFF;
    background-color: #A53030;
}

/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }

/*Page*/
#container {
    width: 800px;
    margin: 0px auto;
}

#logo {
    width: 170px;
    height: 60px;
    margin: 5px;
}

#header {
    width: 800px;
    height: 200px;
    background-image: url('../images/best.jpg');
}

#navigation {
    color: white;
    width: 800px;
    background-color: #000;
}

#left-column {
    width: 150px;
    padding: 10px;
    float: left; 
    color: #FFF;
    background-color: #A53030;
}

#main-column {
    width:360px;
    padding: 10px;
    float: left; 
}

#right-column {
    width: 200px;
    padding: 10px;
    float: right; 
}

#footer {
    margin-top: 50px;
    width: 800px;
    border-color: #262626;
    border-top-style: solid; 
    border-width: medium;
    clear: both;
}

#footer ul li {
    list-style: none;
    float: left;
}

#footer ul li a {
    display: block;
    padding: 5px;
    width: auto;
    color: #000;
    font-weight: bold;
    text-align: center;
    text-decoration: none
}

#footer ul li a:hover {
    color: #49A3FF;
}
+3  A: 

Try using padding instead. The margin is being "swallowed" under the floating elements.

Brandon Gano
+2  A: 

You need to clear the float on left-column and right-column.

Add overflow:hidden; to #container

Emily
I'm not sure what do you mean with clear the floats. If I add clears to left-column and right-column the content is ruined. If I remove the floats the content is ruined too.
janoChen
Floats do not have a height so your #container div is not stretching to all the way to the bottom. See this page http://www.quirksmode.org/css/clearing.html for a good explanation. Use #container {width: 800px; margin: 0px auto; overflow:hidden;} to make the container div "clear" the floats.
Emily
Thanks! It worked. I wrapped both columns with another div and applied the overflow to it.
janoChen