CODEWITHSUNDEEP
jqueryhtmlcss
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

how to set margin value to fixed positioned div

I have applied this css on fixed position div

#abs{
position: fixed; 
bottom: 0; 
background-color: red; 
padding: 20px; 
width: 100%; 
margin-top: 200px;
}

But margin-top: 200px; doesn't work.

Here is the demo

Is there a way with jQuery?

Upvotes: 0

Views: 2302

Answers (4)

Dom Day
Dom Day

Reputation: 2562

Fixed positioning takes an element out of the document flow, so no fiddling the the element's margins will work. If you can't alter the html try adding

body {
    margin-bottom: 200px;
}

Incidentally, if you really needed to add a bit of content to the bottom of the page, but only have access to stylesheets, you can use this:

body:nth-last-child(1):after {
    content: "aha ";
    line-height: 200px;
}

http://jsfiddle.net/DomDay/QqMFX/

Upvotes: 2

Praveen
Praveen

Reputation: 56509

If space between #abs and #someid is your problem then have linebreaks <br />

Check this updated fiddle

Update: If you're open to use jquery then check this fiddle

Upvotes: -1

Nithesh Narayanan
Nithesh Narayanan

Reputation: 11765

Try giving margin-bottom:200px; for the top div class #someid this also gives the same result Check This

EDIT

Add position: relative; instead of fixed then it will be work.

#abs{
     position: relative; 
     bottom: 0; background-color: red; 
     padding: 20px; 
     width: 100%;
     margin-top:200px;
    }

Check this

Upvotes: 3

Amar Agrawal
Amar Agrawal

Reputation: 141

#someid{
        position:absolute;
        height: 700px; 
        background-color: yellow;
        width: 100%;
        }
#abs{
     position:absolute;
     background-color: red;
     padding: 20px; 
     width: 100%;
     margin-top:200px;
    }

Upvotes: 0

Related Questions