Hello everyone, I am trying to make sure that the black line in my footer always stays at the bottom, regardless of the size of the monitor. I am using a grid-based CSS.
I'm not sure if the issue lies within the body?
/* GRID BASED ([{"media":"default","options":
{"gutter":"0.25","columns":6,"width":"100%"}},{"media":"only screen and (min-width :
641px)","options":{"gutter":"0.25","columns":10,"width":"90%"}},{"media":"only screen
and (min-width : 1024px)","options":
{"gutter":"0.25","columns":14,"width":"100%","maxWidth":"1232px"}}]) */
body {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
line-height:157%;
color: #666666;
font-size: 13px;
letter-spacing:0px;
}
body img {
max-width: 100%;
height: auto;
}
body h1 {
font-size: 30px;
font-weight: bold;
color: #333333;
line-height: 120%;
}
body h2 {
color: #333333;
font-size: 24px;
font-weight: bold;
line-height: 120%;
}
body h3 {
color: #5F5F5F;
font-size: 20px;
font-weight: normal;
line-height: 120%;
}
body h4 {
color: #5F5F5F;
font-size: 14px;
font-weight: bold;
}
body p {
font-size:13px;
color: #666666;
line-height:157%;
}
body a {
color: #0000FF;
font-weight: normal;
text-decoration: none;
font-size: 13px;
line-height:157%;
}
body a:active, body a:hover {
color: #FF0000;
}
body a:visited {
color: #7A1A8B;
}
.Header {
clear: both;
min-height: 25px;
width: auto;
background-color:#030303;
}
.main {
clear: both;
min-height: 300px;
width: auto;
}
.footer {
clear: both;
min-height: 21px;
width: auto;
background-color:#030303;
}
.column_1 {
min-height:25px;
margin-left:auto;
margin-right:auto;
width:96.6666%;
padding-left:1.6667%;
padding-right:1.6667%;
}
.column_2 {
min-height:300px;
margin-left:auto;
margin-right:auto;
width:96.6666%;
padding-left:1.6667%;
padding-right:1.6667%;
}
.column_3 {
min-height:21px;
margin-left:auto;
margin-right:auto;
width:96.6666%;
padding-left:1.6667%;
padding-right:1.6667%;
}
.zeroMargin_mobile {
margin-left: 0;
}
@media only screen and (min-width : 641px) {
.column_1 {
width: 88.2000%;
padding-left:0.9000%;
padding-right:0.9000%;
min-height:25px;
}
.column_2 {
width: 88.2000%;
padding-left:0.9000%;
padding-right:0.9000%;
}
.column_3 {
width: 88.2000%;
padding-left:0.9000%;
padding-right:0.9000%;
min-height:25px;
}
.zeroMargin_tablet {
margin-left: 0;
}
.Header {
min-height: 25px;
}
.footer {
min-height: 25px;
}
}
@media only screen and (min-width : 1024px) {
.column_1 {
width: 98.5714%;
padding-left:0.7143%;
padding-right:0.7143%;
max-width:1232px;
min-height:25px;
}
.column_2 {
width: 98.5714%;
padding-left:0.7143%;
padding-right:0.7143%;
max-width:1232px;
}
.column_3 {
width: 98.5714%;
padding-left:0.7143%;
padding-right:0.7143%;
max-width:1232px;
min-height:25px;
}
.zeroMargin_desktop {
margin-left: 0;
}
.Header {
min-height: 25px;
}
.footer {
min-height: 25px;
}
}
HTML
<body>
<div class="Header">
<div class="column_1 gridContainer"></div>
</div>
<div class="main">
<div class="column_2 gridContainer"></div>
</div>
<div class="footer">
<div class="column_3 gridContainer"></div>
</div>
</body>
I would appreciate any help as I have tried solutions from here but they didn't work when I implemented them. Thank you so much!