Stretchable CSS cells

Prerequisite: Initiation to basic CSS (View result)

CSS programation offers a lot more advantages than designing with tables.

However, a block <div> does not act the same way a cell in a table would, and the most frequent problem is that we want two neighboring cells to adapt to one another when they are stretched according to their content.

Div blocks are not linked together, since they are not cells. If a cell changes, its neighbor will keep its pre-definite dimensions. (see image 1)

 

Solution with a block in absolute position

The trick to have both blocks visually in sync is to play on the color scheme of a content block in which both blocks are set. (View result here).

The idea is to have a global content block that would have the same background color as the expandable one. When the latter stretches, it also stretches the one in which it sits (see image 2).

Here is how to do it: we have a left side, a right side, and a central side (content) as well as a content block in the same color as the menus. When the content grows, it will give the illusion that the menus stretch as well, even though only the background of the content block will be visible. (View result here).

We will create a template with a menu on the left, a menu on the right, a footer and a central content block that will push the menus down: 

CSS code:

 #Content block {
 position: absolute;
 margin-top: 20px;
 width: 100%;
 background-color:#CCCCFF;
 }
 #center {
 background-color:#9999CC;
 margin-left: 150px;
 margin-right: 150px;
 }
 #menu {
 position: absolute;
 left:0;
 width: 150px;
 }
 #right{
 position: absolute;
 right:0;
 width: 150px;
 }
 #footer { background-color: #99CCCC; }

HTML:


<div id="content block">

	<div id="menu">
	<p>menu</p>
	<p>fixed width: 150px</p>
	</div>

	<div id="right">
	<p>right</p>
	<p>fixed width: 150px</p>
	</div>

	<div id="center">
	<p>Central part that will push the comumns down.</p>
	</div>

	<div id="footer">footer</div>
	
</div >

For your documentation, all the Alsacreations models and templates are based on this principle of stretchable cells.

Here are other methods that are a little more complex:

Print article

Raphaël GOETTER
www.alsacreations.com