CODEWITHSUNDEEP
jqueryhtmlcss
Arbejdsglæde
Arbejdsglæde

Reputation: 14088

Float div to right with margin right at any screen size

I have background image (size of image is 2600x1170)

sbBody {
    background: #999 url(footer_bg.jpg) center top no-repeat;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 1105px;
    font-family: Serif, Georgia, Times New Roman, Times;
    font-size: 12px;
}

I have a special area at this image (on right side of image), and I need to show special div that should be at this area, I did it with float right and margin 

.main_box {
    float: right;
    margin-right: 505px;
    margin-top: 75px;
}

It looks fine in screen resolution 1900x1200, but if I change browser size my margin div is broke. How I can have the same div position until browser window is more then 800px;

<body class="sbBody">
    <div class="main_box">
    </div>
</body>

Thanks.

Upvotes: 1

Views: 401

Answers (1)

web-tiki
web-tiki

Reputation: 103810

As you are floating your div to the right, you need to fix your background to top and right using : 

background-position:top right;

Instead of top center

See this DEMO

CSS :

.sbBody {
    background: #999 url(http://lorempixel.com/output/nature-q-g-1280-720-10.jpg) right top no-repeat;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 1105px;
    font-family: Serif, Georgia, Times New Roman, Times;
    font-size: 12px;
}
.main_box {
    float: right;
    margin-right: 505px;
    margin-top: 75px;
    background:gold;

}

Upvotes: 1

Related Questions