The top 10 things you've always wanted to do in CSS

Horizontally centre an element

As you most probably know, the align="center" property is depreciated as of HTML 4. So, to centre a block element now, we must look to its margins.

Block Elements

margin:0 auto;

By using margin:0 auto, we are creating equal margins on both the left and right sides of our block element, thus pushing it to the centre of the screen (this is the same as using margin-right:auto; margin-left:auto). Why does this create a centering effect? Well, the W3C Visual Formatting Model say that if both margin-left and margin-right are set to auto, their values will become equal, thus causing the element to be horizontally aligned.

Inline Elements

			display:block;
			margin:0 auto;
		

Inline elements will not centre with margin:0 auto alone, as it isn't in their nature. An inline element will not break the flow of a page, therefore, bare of CSS, you cannot move it where you want it to go. To get around this, we must convert our inline elements into block elements, by using display:block.

Note that margin:0 auto will not work if you have anything above the doctype on your page.

A div horizontally centred on screen

Float block elements next to each other

Floating block elements next to each other requires using the CSS float property. It has three values: left, right and none (well, four including inherit, but IE doesn't support this value).

Left will float your element to the left, with surrounding content flowing to the right
Right will float your element to the right, with surrounding content flowing to the left
And none will force the element to appear just where it occurs in the code

Floating items left

Two divs floated side by side to the left

			.div1 {
				background-color:green;
				float:left;
				width:400px;
				height:400px
			}
			.div2 {
				background-color:red;
				float:left;
				width:400px;
				height:400px
			}
		

Floating items right

Two divs floated side by side to the right

			.div1 {
				background-color:green;
				float:right;
				width:400px;
				height:400px
			}
			.div2 {
				background-color:red;
				float:right;
				width:400px;
				height:400px
			}
		

Dimensions...(a side-note)

Just to let you know, not giving a block-element a width or height is the equivalent of setting its width and height to auto: width:auto and height:auto. Empty elements (elements without any content) require a width and height that is not auto, otherwise they will not render on screen.

It is also a good idea to specify a width and height on your images, otherwise, if they render after the content, there might not be sufficient space for them, and your page could end up looking a bit strange (I don't always do this, but it is advisable!) This happens because the document doesn't know how big the images are, so it can't create the desired space, so you end up with the text overlapping your images.

So just remember to specify dimensions where needed. It will save you a lot of hassle!

Anyway, back to floats...

Clear a float

To clear a float we use the clear property, which has four values: right, left, both and none.

Right will prevent floating elements from appearing on the left side of your element
Left will prevent floating elements from appearing on the right side of your element
Both will clear the floats on either side of your element, thus preventing any block elements from sitting next to it
None is the default value. Adding a float of none will cause content to flow around your element

Clear all floats

clear:both

The middle div is dropped to a new line and all floats beside it have been cleared.

Above divs as they would be without the clear:both on the purple div in the middle.

It's best practice to remove any floats from elements that have a clear:both...y'know...just to keep your code in order.

Clear one float

If you wish to clear a float on one side, it is slightly more complicated. You can't just add clear - (whichever side you wish to clear) to that element, as Explorer can not accept a float properly alongside a clear property – unless it's clear:both, but in this instance you don't need the float anyway. So to accomplish this we tend to do the following: Div with both floats cleared

clear:both will clear the floats on eitherside of an element.

<div style="clear:both"></div>

We create an empty container, put it where we want the break to occur and add clear:both to it. This will force the element onto a new line. The floats on its other side (the one without the clear:both) will not be affected. Note that floated elements should have a width. If not then unexpected results can occur, like your element dropping to the next line, thus not floating at all!

Wrap text round an image

We use the float property (you must be getting sick of it by now!) to wrap text round an image. Firstly, position the image at the beginning of the element whose text you ware planning on wrapping – even if you want the image appear to the right of the text. Then give the image a float of either right or left – right if you want the image to go after the text, left if you want it to go before.

Make a div expand to fill its content

If you want a container to expand to fit its content, there are two things you can do.

No dimensions

			#myDiv {
				background-color:orange;
				overflow:auto;
		

The first one is to give the container no dimensions and give it an overflow:auto (I have also added an orange background colour).

The result is that the div will fill the screen horizontally, but along the vertical axis, it will only stretch as far its content's bounds. So, if your container is 400px, the containing div will also be 400px. Note that this is the same as setting the object's width and height to auto.

Width, height 100%

			#myDiv {
				background-color:orange;
				width:100%;
				height:100%;
				overflow:auto;
		

The other method is to give the element in question a width and height of 100% and an overflow:auto. Keep in mind that you should only give an element a width and height of 100% if it doesn't have any padding applied to it, otherwise scrollbars will appear. This is because padding is counted as part of an element's overall dimensions.

Div with scrollers as it exceeds its container

Scrollbars appear because the inner container, with a width of 100% and a padding of 6px exceed the width of the container. Padding is added toward the dimensions.

Using 100% width and height will not work as expected if you have specified either 100% width or 100% height in the body tag. Instead, the element will fill the whole of the screen in whatever direction is set to 100% in the body. So, say if you have specified a width and height of 100% in the body and given your element a width and height of 100%, then it will fill the screen. If you just have height:100% in the body, then the element will only expand to fill the x-axis.

Note: You must use overflow:auto on any container whose dimensions depend on its content. Otherwise the container might be treated as if it isn't actually on the page.

Spruce up your links

There are four states of the anchor (link) tag:

a
a:visited
a:active
a:hover

It's quite common to write your links like this:

			a {
				color:red;
				font-weight:bold;
			}
			a:hover {				
				color:blue;
				text-decoration:none;
			}			
		

This method involves manipulating the a tag directly and its hover state, a:hover. However, I prefer to add styles to the a:visited as well as aand a:hover, as I feel the visited state is useful, as it tells you what pages you have already visited.

To add pizzazz to your links try manipulating the various link states. Experimentation is your best friend :).

Have your block element stretch to fit the visible screen

This technique basically makes your block element fill the whole of the screen. This is useful, for instance, when you have a background image in a div, that you want to fill the screen at all times. To achieve this, you need to tell your element exactly what space to fill and this is where the body and html tags come in.

			body, html {
				width:100%;
				height:100%;
			}
		

We give the body and html a width and height of 100%, which causes our block element to stretch to fill the screen. If you want your element to fill the whole screen, you must specify a height and width of 100%, but if you only want it to fill the screen vertically and you're not so bothered about the width, then it's only neccessary to enter a height. If you want to achieve the "ultimate" full screen effect, it is often desirable to set the body's margins to 0, which will eliminate any white space round your content, thus pushing it right up against the bounds of the window.

Remove page margins, so your content pushes up against the sides, top and bottom of the screen

Have you ever wondered what causes that 8px or so gap round the sides of the screen when your website is supposed to fit the screen perfectly, or perhaps when you open an image directly in a new window?

Well, it's the body’s margins. We remove them by saying:

			body {
				margin:0;				
			}
		

And voila, we’re done! No ugly white space.

Create a horizontal menu

Horizontal menus are everywhere, and they're quite useful. Creating one isn't as daunting a task as you might think, and, no, it doesn't involve a single hack. It's pure CSS.

When we create a HTML menu, we are (hopefully) using the ul or ol elements. CSS list items (li's) naturally appear one under the other. But we don't want this. So to get round it, we change the li to display:inline.

			li {
				display:inline;				
			}
		

Perhaps you want to remove the bullet-points and control those margins.

			ul {
				list-style-type:none;
				margin:0;
				padding:0
			}
			li {
				display:inline;				
			}
		

And maybe you want to align the list elements to the centre.

			li {
				display:inline;
				text-align:center;
			}			
		

Converting a block element to an inline element and vice-versa

Block and inline elements are the two main types of elements in CSS. Sometimes it's handy to switch between the two. A good example is when you want your links to become buttons. To do this we manipulate the CSS display property.

The display property has many values, though not all of them are widely supported. Here I am going to list the values that are supported by all modern browsers.

none - will not render the element at all (this it different from visibility:hidden as it completely removes an element from the page, and not just from view)
block - will render a block element
inline - will render an inline element

To convert an inline element to a block element, we do the following:

			a.button {
				display:block;				
			}			
		

To convert a block element to an inline element, we do the following:

			li.button {
				display:inline;				
			}			
		

This might be useful when aligning menu items horizontally. For more on horizontal menus, see here.

Block elements will not fit their content, horizontally. Unless a width is specified that is not auto or 100%, they will expand horizontally to fit their parent container. Vertically they will fit their content, unless otherwise specified. Both padding and margins can be applied to them.

Inline elements "shrink-wrap" to fit their content both horizontally and vertically, and only left and right padding and margins will have an effect.

Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.

Back to resources.