CODEWITHSUNDEEP
htmlcssmarginfixed
user2400053
user2400053

Reputation: 11

How to make div fixed and with margin?

I want to make footer to my website, and i want it to be fixed (always in the botton). It's working and looking fine, but when the content is full, it's not showing the margin-top that I gave it. Please help, i need a way to give fixed div - margin-top... Thanks.

Code:

<div style="width: 100%; height: 100px; margin-bottom: 50px; background: red;">

</div>
<div style="width: 100%; text-align: center;">
    Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />
</div>
<div style="width: 100%; height: 50px; margin-top: 50px; background: blue; position: fixed; bottom: 0;">

</div>

Upvotes: 1

Views: 412

Answers (2)

tobias_burkill
tobias_burkill

Reputation: 35

You should look into sticky footer, that will sort it out. And yeh you should really separate out your html from your css and you should use the footer tag if it's a footer. http://ryanfait.com/sticky-footer/

Upvotes: 1

Travis J
Travis J

Reputation: 82277

jsBin Demo

Place another fixed height div just below the blue one by using a z-index. This will result in a white "margin" showing above the blue. The reason that the margin is not affecting the page is that position: fixed elements do not affect the page flow.

<div style="width: 100%; height: 100px; background: white; position: fixed; bottom: 0;z-index:1"></div>
<div style="width: 100%; height: 50px; background: blue; position: fixed; bottom: 0;z-index:2"></div>

Upvotes: 0

Related Questions