'vertical space between div tags

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. Lastly, there is another div tag to make a "footer". The problem is that I'm getting a lot of space after the 3 columns and before the footer. 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 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-

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/

htmlcss


Solution 1:[1]

I cannot see the image so it doesn't work in jsfiddle, since you don't have any margins imma take a shot in the dark, try floating the footer right instead of left.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3796173

Related Questions