Geek Answers Handbook

It is not possible to add an upper limit to a footer that uses transparency: both

I cannot add a top edge to the footer that uses clear: both. Using gaskets seems to solve the problem. But it destroys the upper continuous 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"> <html xmlns="http://www.w3.org/1999/xhtml"> <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; }
+6
css margin
source share
4 answers

You need to clear the float in the left column and column.

Add overflow:hidden; in #container

+2
source share

Try using a gasket instead. Fields are swallowed beneath floating elements.

+4
source share

Emily answers perfectly! I ran into the same problem a couple of days ago, and I found 3 different ways to achieve this (one with HTML, two through CSS).

+1
source share

Margin does not work with inline elements, just add "display: inline-block" to footer css, margin-top should work.

-one
source share

More articles:


All Articles