How to Center a DIV with CSS

I often find that sometimes the smallest things that were simple in regular HTML are frustratingly complex in CSS. Take, for example, centering a div. You can float it right, float it left, but there is no center. Using text-align: center does not center it either, it just makes any text inside of it centered.

It turns out it is very simple to do. The key is that you must specify a width for your div, either using an exact pixel width, a percentage, or some other measure like em units. Once you set the width, you just have to add left and right margins set to auto, and the div will be centered inside of the container it is in.

Continue reading “How to Center a DIV with CSS”

Make Content Panels Using jQuery

One common design problem is how to display a large amount of content on a page and still make it easily accessible. Often times, a table of contents is used at the top with links within the same page to sections below. This gets pretty unwieldy if you have a lot of content, and splitting it up into multiple pages can be annoying and hard to navigate.

An easy and elegant alternative is to use a dropdown list with content panels made of individual divs. The dropdown acts as the table of contents, and each time a selection is made, only that panel is displayed.

Example:

contentpanel

With a little bit of jQuery and CSS, it’s very simple to create this kind of ui.

Continue reading “Make Content Panels Using jQuery”