display-inline:block

One of the values for the display property is inline-block and although it has been around for quite a while now browsers have been slow on the uptake which is a shame because it’s just the sort of thing that can be very useful. In this article we will investigate ways to implement display:inline-block in a number of browsers.

If you are unfamiliar with inline-block then its use is defined as follows: “an inline-block makes the element generate a block box that’s laid out as if it were an inline box“.

What this means is that a “block level box” can retain most of its block level capabilities but in an inline environment. This would allow you to align a number of boxes on the same line all with their own width and height much in the same way as floating the elements but having the benefit of allowing inline rules to be applied to them unlike floats.

For example, three or four inline-block elements could be aligned horizontally and centered by using the text-align:center property on the parent. This would automatically center the elements within the available width. We could also apply the vertical-align:property to align their top or bottom edges with each other.

Perhaps it’s best to start with the finished example so you can see what we are talking about. The result is also shown in the screenshot below.

Figure 1

As you can see in the above we have achieved three (apparently) block elements all aligned nicely in the same row. The elements are perfectly centred and they all have their bottom borders aligned with each other. Imagine trying to do this with floats.

The truth is you could not do this automatically with floats at all as you could never align the bottom borders unless you were using fixed heights and then could calculate the margins for each. It is also very difficult to center floats also. With very little code we have achieved this effect so now we will get down to specific details.

(more…)

This article details how to produce a product category list with associated images and text. This is the sort of thing you would see if you did a search on Amazon.

I am going to start by showing the finished product as this will help you visualize what we are going to achieve along the way. Figure 1 below shows a smaller version of the task ahead.

Figure 1

We are going to make a similar display but without using tables as in my view the information presented is not tabular and does not have a logical correspondence between rows and columns. Even if you do present a good case of why this should be in a table, please don’t comment on this as we are interested in the layout techniques rather than perfect semantics (for this example). The techniques presented here can be used in other layouts that are certainly not tabular and will prove useful in many situations.

(more…)

Now that IE7 has overtaken IE6 in usage it has become more common to find authors trying to use position:fixed in their layouts. Therefore in this article we will try to address some common problems and misconceptions when using position:fixed (we will not be covering the background-attached “fixed” property but you can find out more about that here if you are interested.).

Note that position:fixed doesn’t work in IE6 and under so you will need to be using another browser although we will try to accommodate IE6 with some alternate styling.

Fixed to What?

Fixed positioning varies from other positioned elements in that the element is always placed in relation to the viewport and not a local stacking context. Even if you add position:relative to a parent of the fixed element it is still placed in relation to the viewport.

This can present problems if you want to place the fixed element inside a centered layout and then place it at a certain position within that centered layout.

In order to have a positioned element inside a centered layout you can simply let it occupy its normal position in the flow and not specify any position values for top, bottom, left or right at all. This will enable the element to become fixed at that point while the rest of the content scrolls.

We’ll work through some simple examples to show this in effect.

We’ll start with this simple Example

(more…)

In recent thread over at the SitePoint forums, someone asked how to have any sized image fit nicely into the viewport while maintaining its aspect ratio. The assumption is that all the content can fit in the viewport and no scrollbars are needed. While CSS is wonderful and magical, it doesn’t know the sizes of images and let us play with them to pixel perfection, so we must turn to good old JavaScript to maintain aspect ratio.

(more…)

I’d like to share a couple of simple tips for adding graphical borders or side shadows to your CSS layouts. This article is mainly aimed at beginners but there are some useful tips for everyone if you’ll bear with the simpler stuff first.

CSS Full Length Graphical Borders on Fluid Layout

It’s quite easy to use graphical side borders on fixed width elements as you can simply repeat an appropriate sized image down the y-axis of the container and draw both edges at the same time. However, it is often not well understood how to achieve this effect with an element that has a fluid width especially in a 100% high environment.

We will first learn how to apply an image to both sides of a normal content height (but fluid width) container and then later on explore the possibilities of using this for a 100% (viewport high) container.

(more…)

It’s always good when you learn something that you already knew isn’t it?

I know that probably doesn’t quite make sense but what I mean is that quite often you know how things work but it’s how they are applied that can make all the difference. This is the beauty with CSS where you can always be surprised at the different ways the same layout can be achieved. This happened to me the other week when I noticed a different way that a site had been centered using simple techniques already known to us all. Indeed, many of you may already have used this method but it seems to have escaped my attention until now.

The Old Way

One of the first things I learned to do in CSS was how to horizontally and vertically center a fixed width and height element. This could be an image for a splash page (god forbid) or a small centered site that some designers love to do. Originally this was accomplished with absolutely positioning an element 50% from the top and 50% from the left of the viewport. This of course only places the top left corner of the element at the center of the viewport and you then need to drag the element back into a central position with a negative margin equal to half the height and half the width of the element.

Let’s take a look at the old way of doing this and note what the problems are.

(more…)

This is an old question but worthy of a mention once again especially as I seem to have spent the last few days repeatedly pointing out to posters why their page isn’t displaying properly. No matter how good a coder you are no one is perfect and the odd typo or spare character will often creep into your code when you aren’t looking.

Why Should I Validate?

I don’t know the answer “why you should validate” but I certainly know why I validate.

In a recent article on Search-This a poster commented that it was unnecessary to validate HTML and CSS and served little benefit so I thought it would be wise to explain why I always validate and why it is good for me. You can then make up your own minds whether you should validate or not.

(more…)