It's been a while since I've worked on any CSS/HTML development, and I'm facing some challenges with styling the body tag using CSS.
My goal is to have the HTML tag styled with a background color, and then style the body tag to be 80% width with a different background color, which is all working fine.
However, I've noticed that the background color only extends one screen height down and then abruptly ends, and I can't seem to figure out why!
Here is the CSS code I'm using:
body {
width: 80%;
margin-left: auto;
margin-right: auto;
min-height: 100%;
height: 100%;
background-color: #FFFFFF;
border-radius: 20px;
-moz-border-radius: 20px;
}
html {
background-color: #000000;
height: 100%;
}
header, nav, article {
display: block;
}
nav {
float: left;
width: 20%;
}
article {
float: right;
width: 79%;
}
Any suggestions or insights would be greatly appreciated. Thank you.
EDIT: I've tried out the suggestions provided here, and the closest result I could achieve with my CSS is as follows:
#content
{
width: 80%;
margin-left: auto;
margin-right: auto;
height: 100%;
min-height: 500px;
background-color: #FFFFFF;
border-radius: 20px;
-moz-border-radius: 20px;
}
html, body
{
background-color: #000000;
margin: 0;
padding: 0;
height: 100%;
}
header, nav, article
{
display: block;
}
nav
{
float: left;
width: 20%;
}
article
{
float: right;
width: 79%;
}
Although it's still not achieving the desired outcome, this is the CSS setup that seems to work best with the wrapper so far.