Search code examples
htmlcsspositionfixed

Modifying area of appearence of div

I want to create a fullsite layout in which I can create subdivs into a preassigned position, WITHOUT positioning settings.

I've created a top, left and bottom wrapper which should always be fixed. Example follows:

http://jsfiddle.net/4ca1uto5/

What i want is to make ANY divs, following the top/left wrappers to appear below top- and leftwrapper.

 <div id="topwrapper">hej</div>
 <div id="leftwrapper">hej2</div>
 <div><p>I want this div to start within the topleft corner of the white area, without any positioning settings</p></div>
 <div id="bottomwrapper">hej3</div>

 #topwrapper {
position:fixed;
width:100%;
height: 100px;
background-color:blue;
color:white;
 }
#leftwrapper {
position:fixed;
width: 20%;
height:100%;
background-color:grey;
color:white;
top:100px;
}
#bottomwrapper {
position:fixed;
width:100%;
height:50px;
background-color: orange;
color:white;
bottom:0px;
}
Solution

  • Although I am not a fan of your layout method this what you want is possible.

    Firstly, you have not stated position values for your fixed divs so that needs to be addressed.

    The, by adding padding top & left (top = equal to the height of your header) and (left = width of your sidebar) to the body we can ensure that all future divs start as required.

    Note: I also adjusted the height of your sidebar so that it actually fits between your header and footer.

    * {
  margin: 0;
  padding: 0;
}
body {
  padding-left: 20%;
  padding-top: 100px;
}
#topwrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: blue;
  color: white;
}
#leftwrapper {
  position: fixed;
  left: 0;
  width: 20%;
  height: calc(100% - 150px);
  /* 150px = header + footer */
  background-color: grey;
  color: white;
  top: 100px;
}
#bottomwrapper {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: orange;
  color: white;
  bottom: 0px;
  left: 0;
}
    <div id="topwrapper">hej</div>
<div id="leftwrapper">hej2</div>
<div>
  <p>I want this div to start within the topleft corner of the white area</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit aperiam obcaecati dicta odit praesentium doloremque fuga soluta rem nisi aliquid. Ad earum non sit voluptatem!</p>
</div>
<div id="bottomwrapper">hej3</div>