Side By Side

There are a number of different ways to place two elements side by side in a web page. Here we will look at a few of the alternatives. Each of these approaches has its advantages and disadvantages and so the approach you choose for a given situation will depend on which one fits best with how you want the page to change as the viewport size changes.

Position Absolute

We can place elements exactly where we want them by specifying an absolute position for them. This takes them out of the normal page flow so if you are going to use this approach you need to wrap them all in a position relative element so that their positions are relative to that element. If you instead make them relative to the entire page (as happens if you don't provide a relative element) then the page will become jumbled just as soon as it is viewed in a viewport that has a different size to that used by the designer.

When you use this approach with a relative wrapper then you need to style that wrapper so that it will wrap around all of the absolute elements (such as using overflow hidden) so that the rest of the content will not try to occupy the same space.

This approach can keep two or more elements in the same position relative to one another while the rest of the page wraps around them to fit the viewport.

float

If we float an element to the left or right of the page then that element is removed from the normal flow of the page and the rest of the content flows around it. This gets the element alongside whatever isn't floated but it means that the non-floated content will wrap around the floated element. Where the non-floated element is taller than the floated one then it will wrap under the floated element (unless we set a margin on the non-floated element to prevent that) and if it is shorter then whatever comes next in the page will also wrap (unless we clear the float for that element). By combining a margin and clearing the float we can ensure that the two pieces of content remain side by side regardless of which is the taller. As long as you have only two columns and don't need to apply different backgrounds then you get a workable two column layout.

An alternative is to float all of the elements that you want side by side. This removes the need to apply a margin and it means that we need to use a different approach to clearing the floats (such as specifying overflow hidden on the wrapping element). With this approach the elements can rearrange themselves underneath each other when there is insufficient space for them all to fit side by side.

Inline Block

By making the elements inline-block you allow the regular sizing attributes to be applied as if it were a block element while allowing it to be displayed inline with other content. When using this approach you again need a wrapper around the elements as you don't want other content to get mixed up with the inline block elements (as unless there are sufficient elements to fill the width they will be considered to be a part of a single line of content and so you could end up with huge gaps in surrounding text.

As with floating elements, inline-block elements can wrap underneath one another if there is insufficient width for them all to fit on the one row. When they do wrap they start a new row leaving a gap under any elements shorter than the tallest (which is different from floated elements).

Display Table

Using the display table, table-row and table-cell we can define a tabular structure to display the page content. This provides the same effect as using the HTML table tags to define the layout but without the disadvantages associated with that approach. This way you can still use the semantically appropriate tags to define the content and not use tags that imply the content is tabular data when it isn't. Also since alternative CSS can be provided for different viewport sizes you can use a CSS table layout for some browser widths while switching to a different approach when the content doesn't fit the table layout.

Using this approach means that the elements in a row actually are the same height and so applying backgrounds will not make things look odd. The other difference from the float and inline-block alternatives is that there will always be a fixed number of columns across. The columns will not reorganise themselves to fit narrower viewports.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate