div标签之间的垂直空间

Question

I have found related answers on this site but I was unable to find a solution that helped me. 我已经在该站点上找到了相关的答案，但是找不到能够帮助我的解决方案。 I have created the background of my website in such a way that first, I've used a div tag to create the header("HT") then 3 div tags to divide it into 3 vertical columns("lside","cside","rside") where I will be adding different content. 我以以下方式创建网站的背景：首先，我使用div标签创建标头（“ HT”），然后使用3个div标签将其分为3个垂直列（“ lside”，“ cside” ，“ rside”），我将在其中添加其他内容。 Lastly, there is another div tag to make a "footer". 最后，还有另一个div标签来制作“页脚”。 The problem is that I'm getting a lot of space after the 3 columns and before the footer. 问题是我在3列之后和页脚之前有很多空间。 I have not added any margins. 我尚未添加任何边距。 How do I remove this gap so that the footer stats from where the columns end? 如何消除此间隙，以便页脚统计从列的结尾处开始？

HTML code- HTML代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylemain.css">
</head>
<body>
<div id="HT">
<img id="imgHT" src="logo.png" height="100" width="300" >
</div>
<div id="lside"></div>
<div id="cside">

</div>
<div id="rside"></div>
<div id="footer"></div>
</body>
</html>

CSS file- CSS文件

body { 
background: #ffffff; 
    margin: 0px; 
    padding: 0px;
}

a { 
color: #2b2bf6;
    text-decoration: underline;
}   
#HT { 
background: #FFFFFF; 
    width: 800px; 
    height: 100px; 
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#imgHT {
margin: 5px;
    padding: 5px;
    border: none;
    height: auto;
    width: auto;
    float: left;
    text-align: left;
}

#lside {
background: #ffffff; 
width: 200px; 
height: 750px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left;
}

#rside {
background: #ffffff; 
width: 400px; 
height: 750px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left;
}

#cside {
background: #c0c0c0; 
width: 1040px; 
height: 750px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left;
}

#footer {
width: 1440px; 
height: 70px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left; 
background: #808080; 
clear:both;
}

EDIT: FIDDLE: http://jsfiddle.net/cWjt8/ 编辑：FIDDLE： http : //jsfiddle.net/cWjt8/

Answer 1

I was the one deleting the answer earlier, didn´t know if i missunderstood your question. 我是较早删除答案的人，不知道我是否误解了您的问题。 Sorry for that. 抱歉

Why floating a footer? 为什么要浮动页脚？ I guess you wanted something like this, right? 我想你想要这样的东西，对吧？

在此处输入图片说明

<body>
<div id="HT">
 <img id="imgHT" src="logo.png" height="100" width="300" />
</div>

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

<div id="footer"></div>
</body>
</html>

Using a wrapper arround its like: 使用包装器的方法如下：

#wrapper {
    max-width:900px;
    margin:0px auto;
}
#wrapper div {
     display:inline;
}
#left {
    background:red;
    width:300px;
    height:300px;
    margin: 0px; 
    padding: 0px;
    float:left;
}
#right {
    background:blue;
    width:300px;
    height:300px;
    margin: 0px; 
    padding: 0px;
    float:right;
}
#center {
    background:green;
    height:300px;
    width:300px;
    margin: 0px; 
    padding: 0px;
    float:left;
}

There is no need of floating a footer so far. 到目前为止，无需浮动页脚。 Its pinned bellow the wrapper. 它固定在包装纸下面。

#footer {
width: 1440px; 
height: 70px; 
margin: 0px; 
padding: 0px; 
border: 0px;  
background: #808080; 
clear:both;
}

Answer 2

我看不到该图像，因此它在jsfiddle中不起作用，因为您没有任何边距，ima会在黑暗中拍摄，请尝试将页脚向右而不是向左浮动。

div标签之间的垂直空间

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-07-03 08:44:50

解决方案2
2 2014-07-03 08:11:19

div标签之间的垂直空间

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-07-03 08:44:50

解决方案2 2 2014-07-03 08:11:19

解决方案1
3 已采纳 2014-07-03 08:44:50

解决方案2
2 2014-07-03 08:11:19