CSS comes with quite a few production faults. You can?t properly vertically align, and you can?t comfortably create columns in a website without hacks.

Creating two columns with a dividing border, with the border?s length depending on that of the longest column and without the use of background images or JavaScript, is also a non-standard task, because you can?t affect the height of one element based on the height of another.

In the image on the right there are two floated divs used to create columns. If there’s a border on the left column and shorter than the right column, the border will also be shorter.

[caption id=“attachment_111” align=“alignnone” width=“225” caption=“The left column?s border reaches the bottom”]The left column?s border reaches the bottom[/caption]

[caption id=“attachment_110” align=“alignnone” width=“225” caption=“The left column?s border reaches the end of the shorter column”]The left column?s border reaches the end of the shorter column[/caption]

The Required Result

[caption id=“attachment_109” align=“alignnone” width=“225” caption=“The border continues along the longer column”]The border continues along the longer column[/caption]

The secret

Both columns have a border. The left column is displaced one pixel to the right. This way, the borders overlap, and the longest border reaches the bottom of the page.

[caption id=“attachment_108” align=“alignnone” width=“225” caption=“Each column has its own border, but the left column is moved one pixel right, overlapping the right column”]Each column has its own border, but the left column is moved one pixel right, overlapping the right column[/caption]

In general, the concept of moving element with negative margins or position is quite interesting and can be an effective solution to many problems. I?m sure I?ll deal with it in future posts.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
#menu {
  float:left;
  border-right:1px solid #000;
  width:150px;
  padding:10px;
  background-color:#6E919A;
}
#content {
  float:left;
  border-left:1px solid #000;
  width:250px;
  margin-left:-1px;
  padding:10px;
  background-color:#9BC9D1;
}
</style>
<div id="menu">Menu<br/>Menu<br/>Menu<br/>Menu</div>
<div id="content">Content<br/>Content</div>

Comments