To Top

How to create 2 floating columns with the same height correctly

I want to share with you my approach to markup of double-columned templates where both columns must have the same height. It seems to be well-known and frequently discussed subject and every web-design resource provide to you at least a few ways to do it. But I must point your attention to one moment that described templates are like “bricks”, i.e. templates with fixed width and maximum one expanding column. I will show how to make two (or more) expanding columns and it will be not emulation like bold colorful border, but real full-scale column for which you can setup your background picture for example.

Correct method

The most correct multicolum templates markup approach for present times is using of CSS property display: table-*, for example like this:

column 1
column 2

The main problem is that this isn’t works in IE6/7, which has a significant part of browsers market. So we need to use alternative way to take in this issue.

Alternative method

First lets define our task formulation. We assume that double columned template where first column width is 25% and width of second one is 50%.

The main problem is that we don’t know which from this columns will contain more content than other one. Usually, text information column width is wider than menu, but also exists websites there menu is wider then text, especially this is actual for huge corporate pages.

The most clear and stable working way of column creation from blocks is CSS property usage with “float” name. However, this can’t solve our problem for columns with different heights as you understand.

What properties does float blocks has? They are in stream and this mean that they can has influence on container height. I.e. if we edge blocks and create correct formatting context (either through clear-element or through overflow: hidden) the height of highest column will be applied to our container:

And if we will add not one, but two container, then both containers heights will be equal to highest block height.

Pay attention on column widths: 1st – 25%, 2nd – 50%. I.e. second column is two times wider than first one. So if we set for first external container width to 25% and 200% for second internal (two widths of external container which will corresponds to 50% of total page width) and shift it on container width to the right than we receive something like we want to get.

The final step is solving of problem with text columns. We receive new container from which we are calculating columns width. Because left column must be 25% of page width and internal container width is equal to 50% of page, then new column width must be equal 50% (50% x 0.5 = 25%). Column itself must be in stream but has no any influence on width , that’s why we need to fix column influence on stream with help of margin-rigth: -100% and shifting element to the left on 50%, i.e. half of container width. Desired result is achieved now:

Below you can find HTML-code which realizes this design:

left column
center column

Let’s put a few words to summarize all written above. I create two containers which duplicates main columns and sliding vertically by these columns. This approach is more flexible than CSS-properties display: table-* usage because designer can move columns with top and left properties. I create special example to illustrate huge potential of this method. Please pay attention that each column has its own border and background picture which adjusted to right bottom side, that principally impossible using other methods.

A few words about templates markup

Ex facte it seems like this method is too particular and could be applied to certain templates only. But this isn’t correct judgment. Main trick is in correct definition of modal mesh, columns and containers widths. May be after I will describe this moment in details and now I can give just common suggestion-try to choose such containers and columns width to divide 100 without remainder, i.e. 50%, 25%, 20%, 10%, 5%, 2%, 1%. Then you should adjust blocks without any problems horizontally in independent containers.

Thanks for reading, I hope it will be helpful for you:)

Author blog:

Become an Author

We are constantly looking for creative designers and artists. If you would like to release a free high-quality font, a WordPress theme, Photoshop brushes, some wallpapers or an icon set, please contact us. We would like to support you financially and with traffic.

More inSplashnology

Privacy Preference Center