How to remove space between divs using CSS?

Question

I have a simple page with one main div that contains two divs (left_menu and content) and another div outside the main div that contains the footer.

The actual page appearance is the following:

As you can see, there is a white space between the footer and the other divs. My question is how to remove it.

I tried some solutions presented in other questions (as add vertical-align: top; to the footer's CSS, but it didn't work).

You can find the whole HTML and CSS code below.

<!DOCTYPE html>
<html>
<head>
<style>

html{
height:100%;
}

body{
  height:100%;
  width:95%;
  margin:0px auto;
  border: 1px solid black;
}


#main {
background-color:#f0f0f0;
height:80%;
}

#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}

#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}

#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
}
</style>
</head>
<body>

<div id="main">

 <div id="left_menu">
 <p> Something in my left menu</p>
 </div>

 <div id="content">
  <p> Some content </p>
  <br />
  <p> More content </p>

 </div>
</div>
<div id="footer">
 <p>  My footer.</p>
</div>
</body>
</html>

I really recommend taking a look at [CSS Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)... — mb21, Dec 09 '18 at 13:22
It turns out that adding "overflow:auto" to the css of my footer worked, as suggested by the accepted answer to the question whose mine was marked as duplicated. I am sorry, I tried solutions of several other questions and they didn't work. So, should I delete this question (since it is duplicate) or keep it here anyway? — Hilder Vitor Lima Pereira, Dec 09 '18 at 13:55

score 0 · Answer 1 · answered Dec 09 '18 at 13:25

<!DOCTYPE html>
<html>
<head>
<style>

html{
height:100%;
}

body{
  height:100%;
  width:95%;
  margin:0px auto;
  border: 1px solid black;
  position:relative;
}


#main {
background-color:#f0f0f0;
height:80%;
}

#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}

#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}

#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
  position:absolute;
  bottom:0;
}
</style>
</head>
<body>

<div id="main">

 <div id="left_menu">
 <p> Something in my left menu</p>
 </div>

 <div id="content">
  <p> Some content </p>
  <br />
  <p> More content </p>

 </div>
</div>
<div id="footer">
 <p>  My footer.</p>
</div>
</body>
</html>

How to remove space between divs using CSS?

1 Answers1