White block behind elements on page! (Not Body) [duplicate] - html

Question

This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 4 years ago.
Okay so, Building an account page, and using the same kind of method we normally use when constructing pages, we seem to have this issue where it's like a large white block/space is in the background, so essentially some kind of element or div with white background colour. Only issue is, there isn't anything that should be causing this, and it most certainly isn't the body.
See image
(minor details aside, it is not finished as work has stopped due to this issue!)
The account and operative buttons elements (columns) are supposed to have a white background, while the background behind these two divs should be green. We assumed this would be the body.
body {
font-family: 'nunito', sans-serif;
/*width: 100%;*/
height: 100%;
background-color: #049E84 !important;
overflow: hidden;
align-content: center;
float: inherit;
margin-top: 0;
}
#account {
margin-top 100px;
padding: 50px;
margin-bottom: 100px;
/* font-family: 'nunito', sans-serif; */
/* float: inherit;*/
/* width: 70%;*/
/* margin-left: 19%;*/
/* margin-top: 0;*/
align-content: center;
background-color: #049E84;
}
#info {
text-align: center;
width: 60%;
height: 75%;
background-color: white;
padding: 25px;
font-family: 'nunito', sans-serif;
font-size: 35px;
color: dimgrey;
float: left;
border-radius: 60px;
}
#operativeButtons {
text-align: center;
padding: 25px;
margin-left: 30px;
background-color: white;
border-radius: 60px;
width: 15%;
height: 75%;
float: right;
}
#yourAccount {
font-family: 'nunito', sans-serif;
font: bolder;
color: #282828
}
#valid {
color: grey;
padding-top: 20px;
font-weight: bold;
}
#tickets {
color: #049e84;
}
#warning {
color: #ff0000;
}
#uname {
display: inline;
}
p {
line-height: 1;
}
.title {
padding-top: 10px;
color: black;
}
#bg {
background-color: #049e84;
}
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<div id="bg">
<div id="account">
<div id="info">
<div id="yourAccount">
YOUR ACCOUNT</div>
<hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />
<p class="title">Username:</p>
<p id="username" class="details"></p>
<p class="title">Name:</p>
<p id="name" class="details"></p>
<p class="title">Email:</p>
<p id="email" class="details"></p>
<p class="title">Phone:</p>
<p id="phone" class="details"></p>
<p class="title">Address:</p>
<p id="address" class="details"></p>
<p class="title">Your Tickets:</p>
<p id="tickets" class="details"></p>
<p id="valid"></p>
<hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />
</div>
<div id="operativeButtons">
<p id="home">Home</p>
<p id="logout">Logout</p>
<p id="deleteaccount">Delete Account</p>
<p id="warning">WARNING:</p>
<p id="warningmessage">Deleting your account will entirely erase all your data from our database. By
clicking, you acknowledge this. <br> All tickets will be erased</p>
</div>
</div>
</div>
Please note in the code above that the html and body tags are closed later after the PHP, this isn't the issue. :)
any help would be greatly appreciated, I am completely perplexed! That being said though, I'm also very tired.

Answer 1

Looks like you lack a clear of the floats, that's why the parent element (#account) does not get the expected height.
You can use a clear fix like this:
#account:after {
content: "";
display: table;
clear: both;
}
more info here:
https://css-tricks.com/snippets/css/clear-fix/
Another dirty way to do it is adding <br clear="all"/>. before closing #account.