Footer won't stay at bottom and won't go the full length of page

[cakez]

Hi, I'm coding my website, and for my footer I set it to be blue. But the footer isn't at the bottom of the page, or go the full width of the page.Can anyone help me fix it?

BTW I'm using the skeleton boilerplate

 

HTML

<footer class="main_nav blue">
        <div class="container">
            <div class="row twelve columns"></div> 
            <div class="row twelve columns offset-by-three">
                <p>Copyright &copy; 2017 . All Rights Reserved.</p>
            </div>
        </div>
    </footer>

CSS

.main_nav{
    padding: 1% 0;
    display: block;
    
}

.blue {
    background-color: #76bfd7;
}

 

 

[gtx1060=value]

set the width to 100%

try to adjust the padding as needed - i don't really do frontend so there probably is a more efficient way to do this,

 

also, make sure ur footer code is at the end of ur html - and you are overcomplicating things, just one or 2 divs  would be fine - no need to use a footer tag

[EunSoo]

I don't know much about HTML but add this:

.main_nav{
     width: 100%;
     position: fixed;

}

 

[cakez]

1 minute ago, SCGazelle said:

I don't know much about HTML but add this:

.main_nav{
     width: 100%;
     position: fixed;

}

 

 

position fixed messes up the whole thing, and width: 100%; doesn't do anything

[cakez]

3 minutes ago, gtx1060=value said:

set the width to 100%

try to adjust the padding as needed - i don't really do frontend so there probably is a more efficient way to do this,

 

also, make sure ur footer code is at the end of ur html - and you are overcomplicating things, just one or 2 divs  would be fine - no need to use a footer tag

 

width to 100% didn't do anything

 

[EunSoo]

1 minute ago, cakez said:

position fixed messes up the whole thing, and width: 100%; doesn't do anything

ok. I don't know much about HTML so that's the only help I can give

[cakez]

Just now, SCGazelle said:

ok. I don't know much about HTML so that's the only help I can give

k, thank for response though.

[tatte]

Post the whole code (use pastebin), we can't help you when you don't even give us the CSS for all the classes involved.

 

Footer should display as a block by default, so that's unnecessary. 

[cakez]

32 minutes ago, tatte said:

Post the whole code (use pastebin), we can't help you when you don't even give us the CSS for all the classes involved.

 

Footer should display as a block by default, so that's unnecessary. 

 

css:

Html:

[tatte]

So that uses five separate stylesheets and you still only posted one. I'm done.

 

Since Footer is inside a div.container, it's a good bet the .container is your problem.

[cakez]

2 minutes ago, tatte said:

So that uses five separate stylesheets and you still only posted one. I'm done.

 

Since Footer is inside a div.container, it's a good bet the .container is your problem.

 

Do you want the other css?

normalize

skeleton

font-awesome

font stylesheet

and I set 

.container{
    width: 100%;
    bottom: 0;

and it still doesn't fix it.

[tatte]

You have set the max-width of .container to 1000px, that should be pretty self-explanatory.

 

Floating half of your elements breaks their natural order, this could be fixable by using clear, but basically a complete redesign would be much easier. I'm assuming you used a program to create this, which would explain what caused this level of mess in the first place.

 

TL;DR max-width explains why it's not full width, careless use of float probably explains why it's not the last element shown.

[cakez]

3 minutes ago, tatte said:

You have set the max-width of .container to 1000px, that should be pretty self-explanatory.

 

Floating half of your elements breaks their natural order, this could be fixable by using clear, but basically a complete redesign would be much easier. I'm assuming you used a program to create this, which would explain what caused this level of mess in the first place.

 

TL;DR max-width explains why it's not full width, careless use of float probably explains why it's not the last element shown.

 

I used the skeleton boilerplate

and I fixed it

footer {
   position:fixed;
   left:0px;
   bottom:0px;
   width:100%;
}