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.
The most correct multicolum templates markup approach for present times is using of CSS property display: table-*, for example like this:
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.
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:
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: http://chikuyonok.ru
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.
Showcase of 30 Funny 3D Characters
With the use of some of the 3D tools it’s possible to create really impressive effects. One can make his characters...March 25, 2016
Fresh Toolbox for Web Developers – August 2015
Web developers should always be aware of the current news. In order to help them in their work brilliant web developers...March 23, 2016
Tips for designing models for 3D printing
It’s clear that 3D printing is not just another curiosity that will generate a hype and then fall into oblivion –...March 22, 2016
30 WordPress Themes for Many Types of Business
Looking for an awesome WordPress theme for your business on the net? It may be a rather time-consuming occupation if you...March 20, 2016
Collection of New & Free Fonts for June 2015
Every month we showcased some great collections of free fonts and we are not going to stop there! We would like...March 19, 2016
3D Printing – A New Opportunity for Commercial Printers
In recent years, the concept of 3D printing has taken the world by storm, promising to change forever the process involved...March 18, 2016
Impact of 3d printing affecting the design industry
3D printing or Additive manufacturing is revolutionising the world. What exactly does it mean? You can get three-dimensional physical objects printed...March 17, 2016
5 High-end WordPress plugins tailored to please 3D printing fans
Just like the growing success and popularity of WordPress web development, even the 3D printing industry has witnessed an incredible amount...March 16, 2016
25 Fresh Examples of Minimalist Web Designs
Minimalistic designs in art have always been popular because they are able to convey an idea with limited resources. The sphere...March 15, 2016