DocuSign Dev Blog

Brought to you by the development teams at DocuSign

Absolutely Relatively, Floatless

Or how I learned to stop using floats and love absolute positioning.

Part 1: Bootstrap style floats without floats

Lets say you want to have some things.

10 things.

Each thing has “words and stuff” in it.

Observe:

Lets say you want those things to be like a table.

With rows and columns.

And you want less columns when you change width.

Observe:


Part 2: What does this have to do with position absolute?

We use position relative on our table cell.

We use position absolute on our text and pic within the table cell.

Observe:

Check out the full code here: http://codepen.io/proksoup/pen/oFhDj


The idea here is to present an alternative to the CSS you’ve seen in other frameworks (with floats, padding, margin). I personally find it easier to read, easier to manipulate, and easier to control the variations that I want variations of when I avoid floats/margins/padding and instead I strictly use position absolute techniques like this post demonstrates.

I find this specific technique valuable personally, so I wanted to share it with the internet.

- Derek


comments powered by Disqus