CODEWITHSUNDEEP
css
askome
askome

Reputation: 83

How to keep div on the left of the screen regardless of screen size?

I'm currently working on a site that uses a slider at some point, but instead of the regular arrows that are inside the slider (left and right arrows, for slider navigation) I need to get the left one attached to the left of the screen regardless of screen size and the same with the right arrow. It only works with my screen size currently (1366x768) and the code is

.bx-prev {
margin-left:-16.2%;
position:absolute;
margin-top:-200px;
}

.bx-next{
margin-left:86.2%;
position:absolute;
margin-top:-200px;
}

Any help would be appreciated. Also if it could be done best in Javascript/jQuery, I'm also open to that.

Upvotes: 2

Views: 25445

Answers (4)

Kimtho6
Kimtho6

Reputation: 6184

You need to add position:relative to the parent element then you can use position:absolute; in related to the parent element

.bx-prev {

position:absolute;
top:200px;
left: 0px;
    height:10px;
    width:10px;
    background:lime;
}

.bx-next{
    top:200px;
 height:10px;
    width:10px;
    background:lime;
position:absolute;

right: 0px;
}
.slider{
position:relative;
    width:500px;
        height:500px;
    background:red;
}   

<div class="slider">
    <div class="bx-next"></div>
    <div class="bx-prev"></div>
</div>

sample

Upvotes: 8

Curtis
Curtis

Reputation: 103378

Absolute positioning takes the element out of its container and allows you to freely position it on the document using top/bottom/left/right.

Here is a jsfiddle which shows b inside a in the markup, but I've postioned it to the far left. This is the same with c at the right.

http://jsfiddle.net/w2CsF/1/

Upvotes: 1

andreapier
andreapier

Reputation: 2958

You are using absolute positioning so you can do:

.bx-prev {
margin-left:-16.2%;
position:absolute;
margin-top:-200px;
left: 0px;
}

.bx-next{
margin-left:86.2%;
position:absolute;
margin-top:-200px;
right: 0px;
}

Upvotes: 4

Johan
Johan

Reputation: 35213

position: fixed;

Is the answer to your question.

Upvotes: -1

Related Questions