Chris Jean's Blog

Today I  have yet another entry on HTML and CSS. Today it is how to vertically center content in HTML using CSS.

You’d think that there would be a standard definition of how to vertically center any content by now, but there isn’t. There are a variety of methods out there that do this. I frequently see people using the line-height CSS property to vertically center content. While this appears to work, it isn’t very flexible, only works properly if there is only one line of text, and doesn’t work in all situations.

I found Yuhu’s Definitive Solution with Unknown Height which looks great, works properly with all major browsers, doesn’t have the limitations I’ve seen in other solutions, and is quite simple to implement. Basically all you have to do is have three divs wrapped around the content you wish to vertically center and use specific styling for those divs.

The following code is what does the magic. Replace the comment with the content to be vertically centered, change the height to match the vertical height of the container, and you’re set.

<div style="display:table; height:400px; #position:relative;">
    <div style="#position:absolute; #top:50%; display:table-cell;
vertical-align:middle;">
        <div style="#position:relative; #top:-50%">
            <!-- content to be centered -->
        </div>
    </div>
</div>

I built a quick example document that shows how I applied the rules via a style block in the head to keep the HTML clean.

As with my taming HTML lists fix, I tested this successfully on the following browsers:

• OS X
  • Firefox 3.5
  • Safari 4
• Ubuntu (Linux)
  • Firefox 3.5
  • Google Chrome 4
  • Konqueror 4.2
  • Midori 0.1.2
  • Opera 10
• Windows
  • Firefox 3.5
  • Google Chrome 4
  • Internet Explorer 6, 7, and 8
  • Safari 4

Thank you Yuhu for the great solution.

Anyone that works with HTML and CSS will tell you that positioning things exactly where you want them to be is often times difficult. If you want to position something somewhere vertically, it becomes even worse.

I just finished working on a theme where I needed to force the footer of the layout to the very bottom of the page. While logically putting the footer after all the other content is easy, making it sit at the very bottom of the page even when the content doesn’t take up enough space to push it down there is quite difficult.

After struggling with getting this right for a couple of hours, I finally found a site that has done all the hard work for me. CSS Sticky Footer is the site that saved my sanity.

CSS Sticky Footer provides a solution that sticks the footer to the bottom of the page in a cross-browser compliant manner. The site reports, and I can confirm, that it works with Internet Explorer 6 through Internet Explorer 8,  Firefox, Google Chrome, Safari, Opera, and Konqueror.

Since the implementation could change, I recommend that you visit the site to get details; however, just in case something happens to the site, I’m going to add the solution here as well.

Continue reading “Pushing a Webpage Footer to the Bottom of an HTML Page with CSS”

It seems that every browser rendering engine has a completely different way of rendering lists. I recently had the frustrating job of getting them all to play nicely together.

The CSS I ended up using is quite simple and works across all the browsers I tested (list at the bottom).

This is the magic bit of CSS:

ul, ol {
    list-style-position: outside;
    margin: 0 0 0 15px;
    padding: 0;
}
ol {
    margin-left: 20px;
    *margin-left: 24px; /* targeted IE 6, 7 fix */
}
li {
    margin: 0;
    padding: 0;
}

This CSS forces all the browsers to play by the same rules. The end results are nice and clean.

The left margins are necessary to get all the browsers to not clip part of the bullet/number; however, you can change this left margin on ul/ol elements contained within the primary ul/ol if you need to adjust the indentation of each sub-list.

Each browser that I tested rendered the same thing, albeit with slightly different bullets or padding in front of the number.

The following are the browsers I tested:

• OS X
  • Firefox 3.5
  • Safari 4
• Ubuntu (Linux)
  • Firefox 3.5
  • Google Chrome 4
  • Konqueror 4.2
  • Midori 0.1.2
  • Opera 10
• Windows
  • Firefox 3.5
  • Google Chrome 4
  • Internet Explorer 6, 7, and 8
  • Safari 4