Using Absolute Positioning to Create Flexible Mobile Layouts

Struggle isn't exactly the right term. More like prolonged torture describes the frustration and experience I have had with some CSS concepts. Let's face it CSS is more of an art than some place where engineers can thrive. But time, practice and just being in the right place at the right time will eventually pay off and you learn how to accomplish something. Dumping table based layouts around 4 years ago for the higher performance and quality offered by pure CSS layouts has been an adventure. I certainly can say it was very worthwhile and has paid great dividends. Yet until recently understanding and applying the principles of absolutely position layouts was just something I could not solve, till a few months ago (I think).

Doing mobile web development for the better part of two years now I have been struggling to find the optimal recipe to make my mobile and tablet layouts work nicely. Of course there is Media Queries, but that only takes you so far and you certainly do not want to over pollute your CSS with copious amounts of extra CSS rules.

This past MVP Summit I found myself in the room with at least a hundred or more passionate web developers for a presentation by Steve Sanderson on single Page Applications, which by the way was an awesome session. I came to the session to see where the team had taken the SPA concepts in the ASP.NET stack, but I found myself doing cartwheels when he spent a few minutes showing an absolutely positioned layout. It was one of those DOOH!!!!!!!!! moments we all have. I should have seen this, why did I not see this? OMG, OMG I have to start writing some code immediately to see my fingers produce this magic.

A few months have passed and I have applied the absolutely positioned layout principle to all my new web projects. I have found I can achieve some pretty great stuff for both phone, tablet and desktop without much thought. Today I want to review some of the core principles so that you might apply them to make your web applications better.

How Does Absolute Positioning Work?

When an element uses absolute positioning it uses a set of foxed coordinates relative to the window. To actually place and define the dimensions of an element using absolute positioning at least one of the position properties (top, bottom, left and right) must be set. Now this is where I think I missed the boat on absolute positioning for so long, how the values work. The values for each position property start at 0 and increase. Note you can also specify a negative value. But what tripped me up was thinking if I set the right value to 0 it would make the element have no width because the left and right properties would both be 0 and to me that meant they were at the same location. This is not true. A 0 for the right property means it is aligned 0 pixels from the right-hand side of the window. When setting bottom to 0 it means the bottom of the element is flush with the bottom of the window.

Once I grasped this concept it clicked. I could now see how to layout my web applications and make this naturally scale with the change in the browser's dimensions.

A Simple Phone Layout

Mobile first is where any web project should start, so let's create a standard phone focused layout. It will contain a header, main content area and a footer. It must naturally fill in the height and width afforded to it by the device. Wrapping the entire view is a DIV element.

<

div

id

="content"

>


<

header

class

="header"

>


<

h1

>

My App Title

</

h1

>


</

header

>



<

section

id

="main"

role

="main"

>


<!-- Content Goes Here -->


</

section

>



<

footer

class

="toolbar"

>


</

footer

>


</

div

>



To make the CSS apply its rendering magic each of the inner elements needs to have its absolute positioning rules applied. The wrapper element does not really need help here, in fact I rarely even apply style to it, but keep it around because it helps organize the DOM.

The Header element uses a 0px position for every side except the bottom, this is left out. Instead the element's height is explicitly set, 60px in this example.

header

.header


{

background-color

:

#FFF;


position

:

absolute;


top

:

0px;


height

:

60px;


left

:

0px;


right

:

0px;


}

The main element, the actual app's content area, defines the top as 61px. This will position the element just below the header and will stick there no matter what happens to the shape of the browser. The remaining position values are all set to 0px, again making them stick to the edge's of the window. If you will notice I make an adjustment by adding the padding-bottom: 48px setting. This is because I am including a toolbar or appbar at the bottom of the view. This padding means any content contained within the main element will not be hidden behind that toolbar.

#main
{

background-color

:

White;


overflow

:

hidden;


border

-

top

-

color

:

#000000;


border

-

top

-

style

:

solid;


border

-

top

-

width

:

1px;


position

:

absolute;


top

:

61px;


right

:

0px;


left

:

0px;


bottom

:

0px;


padding

-

bottom

:

48px;


}

The afore mentioned toolbar looks like the header, except it is missing the top value. I also added a z-index to make it sit above the main element. I will talk more about this updated toolbar in an upcoming post, so let's shelve that for today.

.toolbar


{

position

:

absolute;


bottom

:

0px;


left

:

0px;


right

:

0px;


height

:

48px;


z-index:

100;


background-color

: rgb(0, 0, 0);

color

:

#fff;


}

Conclusion

Instead of fighting with CSS, let it help you. There is actually very little need for JavaScript resizing mechanisms, etc as long as you grasp the basics of absolute positioning.

Share This Article With Your Friends!