How to Make Content Appear Beneath a Fixed Div Element

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 to position a DIV beneath a fixed DIV with dynamic size

Pure Javascript solution

With javascript, you can get the height and the position of your <div id="nav"> and use them to compute the position of your <div id="content">:

var navDivElement = document.getElementById("nav");
var contentDivElement = document.getElementById("content");

contentDivElement.style.top = navDivElement.clientHeight + navDivElement.getBoundingClientRect().top + 'px';

Presision

How to get the position of an element:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Source: https://stackoverflow.com/a/11396681/4032282

How to get the dimensions of an element:

var e = document.getElementById('id')
console.log(e.clientHeight, e.offsetHeight, e.scrollHeight);

clientHeight includes the height and vertical padding.
offsetHeight includes the height, vertical padding, and vertical borders.
scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

Source: https://stackoverflow.com/a/526352/4032282

CSS Sticky solution

Change the position: fixed; of the nav by position: sticky; and add a top: 0;.

That way the <div id="content"> will be placed under the nav, but the nav will stay on the top of his container.

<html>
  <head>
    <style>
    #nav {
      position: sticky;
      top: 0;
    }

    /* Allow you to play with the browser height to make the vertical scroll appears and use it to see that the nav will stay on top */
    #content {
      height: 500px;
      background-color: #ff0000;
    }
    </style>
  </head>
  <body>
    <div id="nav">NAV</div>
    <div id="content">CONTENT</div>
  </body>
</html>

Why do contents flow under a fixed DIV?

we do not know your entire code, but if it is like

<div id="container">
   <div id="fixed">fixed</div>
   //a lot of html code here
</div>

put some top-padding to the .container div, padding equal to the height of the fixed div

How do I position a div under a fixed position div

Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:

HMTL:

<div class="menu">
    <div class="menu-item">Home</div>
    <div class="menu-item">About</div>
    <div class="menu-item">Demo</div>
    <div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>

CSS:

body {
    height: 2000px;
}

.menu {
    position: fixed;
    background: blue;
    width: 100%;
}

.menu-item {
    display: inline-block;
    padding: 30px;
}

    .menu-item_sub {
        position: fixed;
        left: 0;
        top: 60px;
    }

How to position a html element under a fixed div

Set the margin-top of the div that you need to be pushed down.

So wrap everything that needs to be pushed down in a div with a class name. Like:

<div class="container">
    //everything that needs to be pushed down goes here
</div>

Then in your css you can push that whole container down by setting it's margin-top

.container {
    margin-top: 100px;
}

Position div below fixed div and to the right of another fixed div

Here is the code. Hope it will help you. If any changes let me know.

*{ 

    margin: 0px;

}

#sidebar {

 /*Strictly Necessary */

 position:fixed; 

 height: 100%;

 width:30%;

 margin: 0px;  

  /*Aesthetics*/

  background: lightblue; 

  border-radius: 7px;  

}

#rightSideWrapper {

 /*Strictly Necessary */

 width:70%; 

 float: right;

 /*Aesthetics*/

 background: black; 

}

header {

 /*Strictly Necessary */

 position: fixed;

 width: 70%; 

 height: 100px; /*Adjust the hight to your purposes*/

 

 /*Aesthetics*/

 background: lightSalmon;

 border-radius: 7px;

}

.ContentBox{

 margin-top: 100px; /*The height of the   header*/

 display:flex;

 flex-flow: row wrap;

} 

main, section, footer {

    /*Aesthetics*/

  background: lightgray; 

  border-radius: 7px; 

  margin: 5px; 

  padding: 20px;

}

main {

  /*Strictly Necessary */

  height: 400px;

  order: 1;

  flex: 0 1 100%; 

 

}

section {

  /*Strictly Necessary */

   height: 400px;

   order: 2;

   flex: 0 1 100%;

 

}

footer {

  /*Strictly Necessary */

  height: 100px;

  order: 3;

  flex: 0 1 100%;

 

}

<html>

<!--...-->

 <head>

  <meta charset="utf-8">

  <title> Ghost </title>

  <link rel="Stylesheet" href="css/style.css">

 </head>

  

 <body>

    

  <div id="sidebar">

   Side Content

  </div>

  <div id="rightSideWrapper">

   <header> 

    Header 

   </header>

   

   <div class="ContentBox"><!--. poner en minusculas.-->

    <main> 

     Main Content 

    </main>

    <section>

     Section Content

    </section>

    <footer> 

     Footer 

    </footer>

   </div>

   

  </div>

 </body>

 

 

</html>

CSS: How to prevent contents of scrollable div from appearing behind a fixed div

As provided by @Pete below. The message_body div and the message_head div lacked definition of their widths and heights even thought the message_container was (later) defined with a weight and height. I updated my example and here is the link :

http://jsfiddle.net/kcfTc/59/

The CSS snippet is:

.message_container{
    width=600px;
    height=395;
    position: relative; //new
}

.message_header{
    padding-bottom: 5px;
    font-size: 14px;
    position: fixed;
    width:600px;  //new
    height:50px;  //new
    background-color: white;  //modified
    overflow-y:auto;
}

.message_body{
    overflow-y:auto;
    top:55px;        //new
    bottom:0;        //new
    left:0; right:0; //new
    width: 100%;     //new
    position: absolute;//new
}

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