Layout: two blocks of the same height

Task

Two block elements are specified - one with the text of the article (width 75% of the document width), the other with a list of links for navigating the first element (width 25%, located to the left of the first block). The height of the element containing the article is set dynamically, depending on the filling of the block with text. It is necessary to make it so that the second block with navigation has the same value of the height parameter as the first one containing the main text of the article.

Technical clarification

Previously, such tasks were solved using the TABLE-TR-TD family of tabular tags, but this approach violated the principle of separating the data structure in markup (HTML) from the styling method (CSS), since the data on the nature of the information presented was not at all tabular, but only used a similar tabular display method on the page:

<table> <tr> <td id=”navigation”> ... a-href ... </td> <td id=”content”> .. ... </td> </tr> </table> 

Later, the CSS standard was extended with additional table, table-cell values ​​for the display parameter, which allowed the use of the usual DIV, SPAN elements in the page layout html-structure and set the corresponding css-rules for them to display as a table with the columns reported as a percentage in width and height:

 <div id=”wrapper”> <div id=”navigation”> ... a-href ... </div> <div id=”content”> ... ... </div> </div> 

 #wrapper { display: table; } #navigation, #content { display: table-cell } 

It would seem that the problem was solved, but unfortunately, this approach did not work in older versions of browsers (IE 6, IE 7) forcing layout designers to look for other approaches. The solution with the help of nested wrapper elements, the displacement of which relative to each other allows to achieve a visual effect of equal columns in height:

 <div id="bg-one"> <div id="bg-two"> <div id="navigation"> ... a-href ... </div> <div id="content"> ...... </div> </div> </div> 

 #navigation, #content { position: relative; float: left; left: -50%; } #navigation { width: 50%; } #bg-one, #bg-two { position:relative; float: left; width: 100%; background-color: #9988ff; } #bg-one { overflow: hidden; } #bg-two { left: 50%; background-color: #99ff99; } 

The role of columns is performed here by wrapping tags (# bg-one, # bg-two) the number of which duplicates the tags embedded in them with content (#content, #navigation). This technique even works in IE 6, but its tangible drawback is the need to add a large number of additional elements (# bg-one, # bg-two) to wrap tags with the text of columns (#content, #navigation). The number of such wrapper elements (# bg-N) is equal to the number of actual block-tags with text columns. In the example above, to add another column (say, #address) on the same level as #navigation and #content, you’ll have to add another common bg-three wrapping element:

 <div id="bg-one"> <div id="bg-two"> <div id="bg-three"> <div id="navigation"> ..  a href... </div> <div id="content"> .. .... </div> <div id="advertisement"> ... ... </div> </div> </div> </div> 

 #navigation, #content, #advertisement { position: relative; float: left; left: -64%; } #navigation,#content { width: 32%; } #bg-one, #bg-two, #bg-three { position: relative; float: left; width: 100%; background-color: #9988ff; } #bg-one { overflow: hidden; } #bg-two { left: 32%; background-color: #99ff99; } #bg-three { left: 32%; background-color: #a0a0a0; } 

In this case, the html markup becomes much more complicated - the reason for the presence of wrapping tags is not obvious. Thus, by refusing html-tables due to bad readability of the markup, we come to an even less readable code. The situation can be improved by moving the wrapping tags one level with the columns:

 <div id="wrapper"> <div id="navigation-bg"></div> <div id="navigation"> ..   a href.. </div> <div id="content-bg"></div> <div id="content"> ... ... </div> </div> 

 #wrapper{ position: relative; float: left; width: 100%; } #navigation, #content { position: relative; float: left; width: 50%; } #navigation-bg { position: absolute; left: 0; width: 50%; height: 100%; background-color: #ffaaaa; } #content-bg { position: absolute; left: 50%; width: 50%; height: 100%; background-color: #aaffaa; } 

In this case, elements with a background (# navigation-bg, # content-bg) are located in front of tags containing text columns, which significantly improves the understanding of the markup. But unfortunately, IE 6 does not understand the percentage values ​​specified in the height parameter for block elements with absolute positioning, and for more recent versions of browsers support the display: table rule that avoids additional div elements containing background columns (in the example above # content-bg , # navigation-bg).

Decision

Reading the task becomes noticeable that the text markup with an eye on the subsequent use of the display: table css-rule also contains one extra tag:

 <div id=”wrapper”> <nav class=”shakespeare”> ... ... </nav> <article class=”shakespeare”> ... ... </article> </div> 

 #wrapper { display: table; } .shakespeare { display: table-cell; background-color: #f0f0f0; } 

Indeed, in this version, the dependence of the column height is bidirectional, that is, the height of the block specified by the nav tag depends on the height of the block specified by the article tag and vice versa - the article block depends on the height of the nav block. Although in this case only the height of the block nav needs to adjust to the height of the longer article tag, an inverse relationship is superfluous:

 <article> <aside> ... ... </aside> ..  </article> 

 article { position: relative; display: block; width: 75%; left: 25%; background-color: #8888FF; } aside { position: absolute; display: block; width: 33%; left: -33%; height: 100%; background-color: #F88888; } 

Percentage values ​​for absolute elements as well as display: table work in IE browser starting only with the eighth version. The values ​​of the width and length of the aside block are taken from the recalculation relative to the size of the article block, since in CSS the coordinates and dimensions of the element with absolute are counted from the first parent element with non-static (relative, absolute, fixed) position parameter values. That is, the width of the article block (which is 75% of the document width) for the aside container is 100%, making up the proportion:

 75% - 100% 25% - ? 

we get

 25% * 100% / 75% = 33.33% 

That is, 25% of the free screen as a percentage of the article block.
Thus, we can get rid of the unnecessary wrapper element, display the dependence of one column on another in the code and not resort to the tabular positioning method for non-tabular data.