CSS: Absolute vs static/relative positioning

Hello,

Here is some question related to CSS/HTML

Let’s say we’ve the following mockup to implement with in our web application:
https://www.evernote.com/shard/s261/sh/10a8066d-92f5-4a1b-be26-60ed1c6abbcd/5e8134659f2e25614031a29e12742f0a

Extremely easy to implement with absolute positioned elements, but still quite challenge with relative/static elements. Would you still consider to refactor and how?

Here is original JSFiddle:
http://jsfiddle.net/s7jwx/

Should look and feel identical :smile:

Thanks in advance.

Great question! I had a good bit of fun toying with your jsfiddle. My optimized code is below — it uses more-or-less the same positioning though.

Fact of the matter is that if you want something that stretches vertically with the viewport, you need to use JS or absolute positioning, and I don’t think there’s anything wrong with that — I’ve worked on apps that use absolute positioning for the main layout, and floats/inline content within that layout.

HTML

<body>
  <header>aaa | bbb | ccc</header>
  <aside>Fixed Width Navigation</aside>
  <div class="content">
    <h2>Some Form here</h2>
    <footer>
      <input type="submit" value="Always at the bottom"></input>
    </footer>
  </div>
  <footer>ccc</footer>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  background-color: red;
}

aside {
  position: absolute;
  left: 0;
  bottom: 50px;
  top: 50px;
  width: 250px;
  background-color: blue;
}

.content {
  position: absolute;
  top: 55px;
  bottom: 55px;
  left: 255px;
  right: 5px;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 5px white, inset 0 0 0 7px red;
  background-color: white;
  text-align: center;
}

.content footer {
  position: absolute;
  border: 2px solid green;
  bottom: 10px;
  right: 10px;
  left: 10px;
  height: 30px;
}

body > footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: black;
}

Thank you @edwin, do you know how to eliminate the following effect:
https://www.evernote.com/shard/s261/sh/eb519bd6-f47d-41ae-b0d7-99a0251efe84/00988946b0c7644207089633805c4e3d

Supposing there will be more elements in the content area I’m afraid that on smaller screens it might look weird

What I’ve done is set my absolute element to overflow-y:scroll which effectively recreates a viewport.

See this fiddle to see what I mean: http://jsfiddle.net/9yLUc

If you’re doing that on mobile, be sure to enable inertial scrolling: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5