HTML & CSS: Width, Height, Position, and Float

Width & Height

The width and height of block and inline-block elements can be set using the width and height properties. It's important to note that inline elements will ignore any width and height values you specify. The width and height properties take any type of CSS length units including pixels, percentages and ems. So if we wanted to, for some odd reason, make all imgs on the page have an explicit width and height of 200px, the CSS might look something like this:

1
2
3
4

img {
	width: 200px;
	height: 200px;
}

This will do the job fine for most tasks (although will probably seem much more useful when we learn about divisions, classes, and IDs in the next tutorial), however for some things we might need some further functionality. Let's say we had something that we wanted to be a minimum of 100px high which could expand further than that if there was enough content in the division to require more space. This can be accomplished more easily than you might think using the min-height property. A similar property exists for width with the same concept, min-width. Maximum values can also be set using max-height and max-width - this is extremely useful in fluid designs, for example setting img { max-width: 100%; } would style all images so they don't break out of their parent containers.

Float

Although setting the dimensions of an element is very important, where it is positioned is just as, if not more, important. The most basic (and one of the most common) ways of arranging elements on a page is to have what is called a float-based layout. This is where elements are pushed to different sides of the page – for example two content boxes sharing the width of a page, one is on the left side (floating left) and one is on the right side (floating right). This concept is illustrated in the diagram below:

Floating left (with a set width)
Floating right (with a set width)

This functionality of making an element float to either the left or right of another element is achieved in CSS using the float property (Surprising, I know). This property can take one of four values:

  • left - The element floats to the left
  • right - The element floats to the right
  • none - The element will not be floated – this is the default
  • inherit - The element's float property should be inherited from it's parent element

So if I wanted all images to float right (again, this is probably never going to be the case – floating is much more useful with divisions, IDs, and classes), I might write something like this in my CSS:

1
2
3

img {
	float: right;
}

Floats can cause problems later in the document though as elements after the floating element will try to flow around it. To avoid this if it is not intended, the clear property can be used with a value of left to clear elements on the left, right to clear elements on the right, or both to clear all floats (if necessary none can also be used to make sure the element doesn't clear anything).

The only other problem with floats is that parents of floated elements often don't expand to the height they should do to contain the floats. Take, for example, the following, which doesn’t function as expected:

1
2
3

<a style="display:block;width:100%;background:grey;">
    <img src="http://www.dev-hq.net/images/logo.png"  style="float:left;"/>
</a>

The fix for this issue is to use something called a clearfix - a bit of CSS which causes the parent element to clear its children and hence cause it to have the correct height. You don't have to worry too much about how this works, but a 'group' class which can be added to any elements to apply a clearfix to them using a common (and lightweight) piece of CSS to do this in browsers from IE8+ is as follows:

1
2
3
4
5

.group:after {
	content: "";
	display: table;
	clear: both;
}

Position

A lot of the time using margins, padding and perhaps the float property will suffice for the positioning of elements on a page, however they can't always accomplish what you want. Luckily there are some other positioning properties in CSS that can be utilized - namely the position property (Once again, I bet you weren't expecting that). This can take a few values, namely:

  • static - The element renders 'normally' – this is the default
  • absolute - The element is positioned relative to it's nearest (in structure) element with positioning
  • fixed - The element is positioned relative to the browser window
  • relative - The element is positioned relative to it's normal position

Once one of these position values is set, the element's position can be fine-tuned using the top, right, bottom and left properties (so long as the position property isn't static, in which case these values will be ignored). So using fixed positioning with a left value of 20px would result in the element being pushed 20px from the left edge of the browser window.

Also, just to make sure that it is understood, absolute positioning positions the element relative to it's nearest positioned parent -- so if we had an img inside a relative positioned p element (or a p element with any positioning value that isn't static), the img will position around that p - if the p in this situation however didn't have any positioning (static), the img would position relative to the body instead.