@media four columns with equally aligned links - solved!
Jun 18 2006
If you were in Dan Cederholm’s Bulletproof Web Design presentation at @media, you might remember a German guy at the back of the room asking Dan how he might approach a design that required four equal-height columns containing variable content, but with consistently aligned links at the bottom of each column.
Here’s my solution – it takes advantage of the fact that you don’t actually have to specify both top and left (or bottom or right) coordinates when using absolute positioning. I’ve only tested it in IE6 and Firefox so far – comments welcome.
Technorati tags: atmedia2006 css
Bookmark this article with del.icio.us
Previously: My new Web 2.0 app
Next: Hooray, he's back!
Comments
- Matthew Pennell
- 810 days ago
- I did consider that, but decided to keep the CSS valid instead. I haven’t tested it in IE7 as my version is rather f**ked, but hopefully the lack of support for * html is matched by getting the rest of it right.
- #2
- Simon
- 768 days ago
- thanks for this, it works really well.
i’ve got one question – i’d like the background of each column to be a different colour, but then you can see that they are different heights, is there a solution to this? - #4
- Matthew Pennell
- 767 days ago
- Simon: The easiest way to do it would be a faux-columns approach, using a background-image to simulate equal height columns.
- #5
The only thing I’d change is using ‘zoom:1’ instead of height:1% or width:100% to give hasLayout to the element in IE.