Set table caption location using CSS

If you use table captions on your site and want to be able to define the caption location there is a little used CSS rule called caption-location.

Internet Explorer puts the caption underneath the table, for example. If you want to put the caption above the table just add:

caption-side:top;

Now your table caption will sit at the top.

How to clear a float

Say you have three divs, A, B & C.

Div A is a container for B & C and you would like B & C to sit side by side.

To get your divs B & C to sit side by side you need to float them, but as soon as you do that div A no longer expands to hold them. This is probably because you haven’t floated div A so the quickest fix is to float it.

However, there are many times you can’t do that – if you are using margin: 0 auto; on the container div, for example.

There are two further solutions:

1) Add overflow:auto; to the container div.

2) Add a clearing div after divs B & C.

Solution 1 can sometimes add scrollbars for reasons that aren’t immediately obvious. If that has happened to you try using solution 2.

Adding a clearing div is very easy. You simply add an empty div just before you close your container div (div A in this example) and set it to clear:both.

Couldn’t get much easier!

Bringing floats back into the flow

As a rule, if you place floated elements inside an unfloated element then the containing unfloated element will not expand.

If you’re having trouble getting an unfloated element to grow to the size of the floated elements it contains there is a very simple method to get it to start growing…

overflow:auto;

Assigning the above property to the containing element causes it to grow with its contents – even if the content is floated. 

Centering the page

You can centre your content in the middle of the page by setting it’s ‘left’ property to 50% and then setting the ‘margin-left’ to minus half of the content’s width. Taking the example of a rectangle:

#content{
position:relative;
width:500px;
height:400px;
left:50%;
margin-left:-250px;
}

Here we’ve moved the rectangle so that its left edge starts exactly in the middle of the page. We then use the margin-left attrribute to move it back to the left by half of the rectangle’s width – leaving it dead in the center.

This effect can also be achieved using only the ‘margin’ attribute and setting this to margin:0 auto; (this has set the top and bottom margin to 0 and the left and right to auto).

Unfortunately this won’t work in IE6 or earlier but we can fix this by also adding the attribute text-align:center; to the rectangle’s parent element (this could be ‘body’, for example). This will also have the effect of centering all of the text inside our rectangle so don’t forget to set ‘text-align’ back to left if that’s how your text is meant to be.

Double margin in IE6

When an element is floated and also has a margin set IE6 likes to double that margin. This happens when the element is floated left and has a left margin or floated right and has a right margin. Luckily this is one of the easier Internet Explorer bugs to fix; you can even do it without any hacks.

Simply set the misbehaving element to display:inline; and it will start behaving as expected.

What about when you need a different mode of diplay, for example display:none;? In this case you’ll have to use a hack like so:


margin-left:20px;
_margin-left:10px;


The _ is so that only IE6 picks it up. In this example all browsers set the element’s left margin to 20px while IE sets it to 10px and then doubles it (20px).