Need help with some CSS

[Jeroen1322]

Hi guys!

 

I have a footer for a little website that i'm making but it is being a pain in the rear..

 

I want to have the footer at the bottom of the page/screen but i have a little margin on the right and left side of the screen and when i put that effect on the footer div it just moves to the right and makes it so you can scroll to the right on the page. 

 

Here is the HTML that matters:

<div id="footer"></div>

 

And here is the CSS that matters:

#footer {   position:absolute;   bottom:0;   width:100%;   height:60px;   /* Height of the footer */   background:#6cf;   margin-left: 50px;   margin-right: 50px;}

What am i missing?

 

Thanks!

[Maximation]

You apply a 50px margin to the left, so it will set off by 50px from the left, because the width is 100% it will go out of the window, that is why you have to scroll horizontally. Do you want the footer to be 50px less wide on each side? You could put everything in a container div and position the container div how you would like it, you can then just let the footer be 100%.

What you could also do is just apply a width of x% to the footer and set the margin-left to (100-x) / 2.

Or you could use a new feature in CSS, it won't have much support though, I believe. (But don't quote me on that) maybe try calc(100% - 100px)

After that set margin-left to 50px. I am not sure if this works and I am unable to test it at the moment, but you should try it out.

Have fun

[Maximation]

You have the width to 100% filling its parent and on top of that you have a margin on both sides which means the the div is bigger than the screen. (presuming the parent is the width of the screen)

Exactly, but what would you suggest as a solution?