Can't Get My Div to Stay Fixed with Layout

Fixed position but relative to container

Short answer: no. (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

How can I make content appear beneath a fixed DIV element?

What you need is an extra spacing div (as far as I understood your question).

This div will be placed between the menu and content and be the same height as the menu div, paddings included.

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
     
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

See my example here.

This works by offsetting the space that would have been occupied by the nav div, but as it has position: fixed; it has been taken out of the document flow.

---

The preferred method of achieving this effect is by using margin-top: 95px;/*your nav height*/ on your content wrapper.

How can I make a div stick to the top of the screen once it's been scrolled to?

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

How do I make my div stay in one position while I move the page around

Using the marquee tag is not standard.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Also I would avoid to wrap a div with a p tag as it's semantically not correct and are supposed to contain only inline elements.

I would separate the styling from the div tag. and do something like this:
https://jsfiddle.net/Mehdikit/bs9shwt0/

HTML & CSS

.container {  position: relative;  height: 2000px;}
.scroll-left {  position: fixed;  right: 0;  top: 0;  height: 83px;}

<div class="container">  <div class="scroll-left" id="page">    <p>This is made by an organization </p>    <br />    <strong>DO NOT COPY!</strong>    <br />    <hr />  </div></div>

CSS layout with fixed top and bottom, variable height middle

Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:

#header {    position: fixed;    top: 0;    left: 0;    right: 0;    height: 100px;    background-color: #abcdef;}#footer {    position: fixed;    bottom: 0;    left: 0;    right: 0;    height: 100px;    background-color: #abcdef;}#content {    position: fixed;    top: 100px;    bottom: 100px;    left: 0;    right: 0;    background-color: #F63;    overflow: auto;}

<div id="header"></div><div id="content"></div><div id="footer"></div>

How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {  height: 100px;  border: 5px solid #000;  display: flex;  flex-direction: column;}.child {  height: 40px;  width: 100%;  background: #f00;  margin-top: auto;}

<div class="parent">  <div class="child">Align to the bottom</div></div>

---

Related Topics