An earlier post detailed how we can build a 100% CSS-based tab layout. While pretty cool and somewhat usable it had some flaws.
There are many available solutions for creating a tabbed interface on a webpage. Most of them have in common that they are using JavaScript and/or use a html structure that separates the headers from the content that they belong to. What we aim to do here is to build a tabbed interface from a set of widgets, without changing the document structure. Let's start with some html code:
Continue readingVertical centering of content is something that took a giant step backwards with the departure from table-based layout. The CSS-property vertical-align is limited and in most cases does nothing more than centering inline content vertically inside its' line.
With one line of content, you can set a large line-height, f.ex. 100px and vertical-align: middle; will center your content vertically within the 100px, but this only works when you have one line.
Another solution can be used if you have content with a known height within a container with known height. A combination of margin and position can vertically center your content. But as said, you need to know the height of both your content and the container outside your content.
Continue reading