Internet Bandaid   [RSS Feed]

Archive for December, 2013

Position:absolute on buttons, list columns and pop up windows

without comments

Hey guys, this one is from Al.

Up until recently, i’ve been using floats a lot for almost everything. But about 2 years ago, I noticed Al , while on planour, using position:absolute for things like

<span class="text">Soccer at High Park</span>
<a class="edit-button"></a>
<a class="delete-button"></a>
<span class="event-time">5:00 pm</span>

with the CSS being

li {position:relative;}
.edit-button {position:absolute; top:10px; right: 100px;}
.delete-button {position:absolute; top:10px; right: 50px;}
.event-time {position:absolute; top10px; right:0;}
(this is not the exact code, but a reconstruction of it based on something id id recently)

At the time, I told Al not to use position:absolute but instead to use display block on the buttons and event time and float it to the right. Then using overflow:hidden on the li element to make it automatically envelope. I said the way he had positon:absolute set up , that it was hard to maintain. But now i realize it’s actually pretty easy to maintain position:absolute items provided you apply position:relative to the most convenient containers, in this case it would the li item. (I think i told Al not to use position absolute probably because at the time he did not choose a convenient container to apply position:relative too).

Anyway, these days i use position absolute a lot to set up permanent left or right columns in a list (like the example above), or position X button to close modals, or to position icons within a button or link. I think those are the times where I use position:absolute without even thinking about it.

Written by John Lai

December 29th, 2013 at 11:54 am

Posted in Uncategorized