Cersei Lannister
Cersei Lannister

Reputation: 33

Margin-right on css is not working in my div

If you want to look at it, it’s onceuponatheme2.tumblr.com. Below is the CSS for it. I’m trying to make the icons on the bottom be 5px from the right, but still appear as though it’s on top of the double border around the noticebox div.

#noticebox{
    position:fixed;
    width:200px; /*width*/
    z-index:99999999999999999999;
    height:auto;
    left:90px; /*how far from the right*/
    top:90px; /*how far from the top*/
    color:#000000; /*text colour*/
    background-color:#ffffff; /*background colour*/
    border:1px solid #000000; /*border width and colour*/
    border-width:3px;   
    border-style:double;
    text-align:center; /*text align*/
    padding:5px;
    padding-bottom:10px;
}
#noticebox a{
    text-decoration:none;
    font-style:italic; /*italic links before hover*/
    letter-spacing:1px; /*distance between letters*/
}
#noticebox a:hover{
    font-style:normal;
    text-decoration:underline;
}
#blogtitle{
    font-size:20px;
    margin-left:5px;
    margin-top:-25px;
    padding-left:3px;
    padding-right:3px;
    padding-top:5px;
    padding-bottom:5px;
    font-family: 'Berkshire Swash', cursive;
    text-transform:none;
    letter-spacing:3px;
    background:{color:background};
    color:{color:text};
    position:absolute;
}
#description{
    padding-top:5px;
    padding-bottom:5px;
}
#links{
    width:120px;
    padding-top:5px;
    padding-left:3px;
    padding-bottom:5px;
    margin-bottom:-25px;
    margin-right:5px;
    background:{color:background};
    position:relative;
}
#links a{
    color:{color:text};
}

Upvotes: 3

Views: 1334

Answers (3)

Rish
Rish

Reputation: 71

The CSS you have wrote inside #links is perfectly fine. Only thing you need to add is a left:60px in the #links. My personal advise is to reduce the use of float property. So finally you #links is look like,

#links { width:120px; padding-top:5px; padding-left:3px; padding-bottom:5px; margin-bottom:-25px; margin-right:5px; background:{color:background}; position:relative; left: 60px; }

You can adjust the div by adjusting the left value.

Hope this will solve your issue.

Upvotes: 0

Wim Mertens
Wim Mertens

Reputation: 1790

Change position:relative to position:absolute for #links, and add right: 5px; You can then remove margin-right: 5px

Upvotes: 2

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

you need to add this style in #links class

float: right;

Upvotes: 0

Related Questions