DevTouch.net - Development & Inspiration

CSS & HTML: Fluid Tableless Graphic Borders Using a Nested Push

Implementing fluid graphic borders used to be very intuitive back when table layouts were in vogue. You would simply create three columns and tile your border images vertically along the outer two columns. Using this format, expanding the width of your website was a simple matter of expanding the width of the center column.

The advent of CSS, however, has introduced us to a whole host of more efficient ways of doing things. The only problem is some of the streamlined CSS replacements for our old habits are sometimes tricky to figure out. One of the things I often see people scratching their heads over are image borders that can automatically adjust to the size of the content between them.

Coming away from table cells, you'll want to float three DIVs side by side and assign the left and right hand ones your border images. But those DIVs will not want to stretch vertically with the center DIV, as they are not connected as table cells are.

Roll Out a Carpet

A common solution is what I think of as a simple carpet, where a horizontal crop of the design mock-up is saved as one image and rolls down the length of a single DIV.

Using one DIV tiled with the above image will do the job. The only problem is it's static. If you want to change the width of your content area, you'll need to make another image. It's a quick solution for those who are sure their pages are going to be a fixed width. But for those using a fluid layout, this obviously won't work.

Synching DIVs with Nested Pushing

How do we get separate DIVs to stretch vertically with each other?

We know that any container will stretch to its contents, meaning if we had one DIV inside another, the parent DIV will stretch to the height of the DIV inside it. Since we need the borders to stretch to the content, we assign a tiling border image to the parent DIV and place the content inside the child. As the content grows longer, the parent will stretch to the same length and its border image will naturally tile along as well.

First we'll tile the parent DIV with the left side border image.

<style type="text/css">
	#left-shadow 
	{	width: 160px;
		background: url(left-shadow.jpg) repeat-y;
		padding: 0 0 0 20px;
	}
	#content 
	{	font: 11px/18px verdana, arial;
		text-align: center;
	}
</style>

<div id="left-shadow">
	<div id="content">
		For cute & snuggly dogs, visit ...
	</div>
</div>

This will give us the below result.

Notice we did not assign the shadow DIV the width of only the image, as we would do if we were working with table cells, but assigned it the width of the full content block because it is the parent DIV, which means it's also acting as a "wrapper." We then told it to only tile vertically by adding a simple repeat-y to the background property. We also gave it left side padding of 20 pixels to push the content to the right.

We'll add the right side border with a third DIV.

<style type="text/css">
	#left-shadow 
	{	background: url(left-shadow.jpg) repeat-y;
		width: 160px;
		padding: 0 0 0 20px;
	}
	#right-shadow 
	{	background: url(right-shadow.jpg) right repeat-y;
		padding: 0 20px 0 0;
	}
	#content 
	{	font: 11px/18px verdana, arial;
		text-align: center;
	}
</style>

<div id="left-shadow">
	<div id="right-shadow">
		<div id="content">
			For cute & snuggly dogs, visit ...
		</div>
	</div>
</div>

Here, we added the right argument to the background property to tell it to tile along the right edge. And we gave it right padding of 20 pixels to push the content to the left.

Now if you want to adjust the width of the box, simply change the 160 pixel value and the borders will automatically readjust without any ado. And that's all there is to it. Nested Pushing is a simple little solution to a very common head scratcher.

Continue Reading:

• Minimal Style Lightweight Drop Shadow For Images
• Graphic Menus w/ Flickerless Image Swapping
• 24 Beautiful Nature Scene Landscape Desktop Wallpapers
• The CSS Letter-Spacing & BR Tag Glitch
• Colorize a Black & White Photograph Image

Also See:

Categories: CSS & HTML

Tags: borders . drop shadow . nested push