dregduc63699 2015-01-19 17:15
浏览 31
已采纳

页脚停留在<div>的右侧

I'm learning HTML/CSS/PHP and building a website from scratch in my spare time.

The footer in the following code stays at the bottom where I want it unless I use the content <div>, then it shoots to the right of the content.

I can't figure out why?! I've commented out the float: left and that doesn't make a difference.

Thanks for your help.

style.css:

html {
font-family: sans-serif;
}

.wrap {
min-width: 600px;
width: 85%;
margin: auto;
float: left;
}

.navigation {
padding: 5px;
background: black;
text-align: center;
}

.navigation li {
display: inline;
padding-right: 10px;

}

.navigation a {
text-decoration: none;
color: white;
font-size: 20;
font-family: fantasy;

}

.navigation a:hover {
text-decoration: underline;

}

.content {
background: #f8f8f8;
float: left; 
width: 80%;
}


header {
text-align: center;
margin: auto;
}

header a {
text-decoration: none;
color: black;
}

h5 {
font-size: 120px;
font-family: cursive;
font-variant: small-caps;
margin-top: 10px;
margin-bottom: -100px;
text-shadow: 2px 1px 3px gray; 

 }

h6 {
font-size: 32px;
}

p {
padding-bottom: 10px;
}

header.php:

<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <title></title>
</head>

<body>

<div class="wrap">

<header>
    <a href="/index.php"><img src = "/images/banner_logo.jpg"></a>

</header>


<div class="navigation">
    <ul>
        <li><a href="/index.php">Home</a></li>
        <!--<li><a href="/blog/index.php">Blog</a></li>-->
        <li><a href="/pics/index.PHP">Pics</a></li>
        <li><a href="/contact/index.php">Contact</a></li>
        <li><a href="/about/index.php">About</a></li>
        <li><a href="/produce/index.php">Produce</a></li>
    </ul>
</div>

footer.php:

<!--begin footer -->


<br><small>Copyright 2015</small>

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

index.php (with content):

<?php include "header.php"; ?>

<!--begin page content-->

    <h2>Welcome</h2>
    <div class="content">
        <p>Wander around and see if I've figured out what to do here.</p>


            <h4>Would you like to tell me you are here?</h4>
            <form action="process.php" method="post"> 

            First Name: <input name="fname" type="text" /> 
            <input type="submit" />
            </form> 




    </div>  
    <br>
  • 写回答

3条回答 默认 最新

  • dtsnx44260 2015-01-19 17:34
    关注

    Because clearing divs is a common problem that you will run across frequently, you will likely want to create a utility class.

    .clearfix:after {
    clear: both;
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   visibility: hidden;
}
.clearfix {
   display: block;
}
.clearfix {
   display: inline-block;
}

    Apply it to the div directly, or sometimes, you'll find that you want to toss it in a div at the end of your oddly floating clear.

    <div class="clearfix"></div>

    or

    <div id="leftnav">
   ...
   <div class="clearfix"></div>
</div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值