CSS: Absolute vs static/relative positioning

Design Front End Development
1

Hello,

Here is some question related to CSS/HTML

Let’s say we’ve the following mockup to implement with in our web application:

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:

Should look and feel identical :smile:

Thanks in advance.

2

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;
}
3

Thank you @edwin, do you know how to eliminate the following effect:

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

4

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: Edit fiddle - JSFiddle - Code Playground

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