CODEWITHSUNDEEP
css
KrispyDonuts
KrispyDonuts

Reputation: 1262

How can a div be positioned where it doesn't move off the page but changes positioning when you resize the browser?

I would like the div to move to the left or right when the browser is resized. However, the div should stop moving when it reaches the left edge of the browser.

For example: apple.com facebook.com

This is what I have right now:

#someElement{
    background-image: url(images/someImg.png);
    width:200px;
    height:45px;
    position:absolute;
    right:68%;
    top:3px;
}

This changes the position of the div when the browser is resized but does not stop when it gets to the left edge.

Upvotes: 0

Views: 3375

Answers (3)

Olokoo
Olokoo

Reputation: 1144

You can set the min-width in the body tag:

body {
    position: relative;
    min-width:100%;
    width: auto !important;
    width:100%;
}

This will stop the element from exiting to the left.

Upvotes: 0

laymanje
laymanje

Reputation: 833

If you make the parent of the element relative positioned. It will make the inner element positioned absolute relative to its parent. 

#someElementWrapper{
  position: relative;
}

#someElement{
  background-image: url(images/someImg.png);
  width:200px;
  height:45px;
  position:absolute;
}

Upvotes: 0

entropid
entropid

Reputation: 6239

Well, instead of using right: why don't you use left:?

left: 25%;

Upvotes: 1

Related Questions