For about a year now, the stylistic quality of my own original html compositions has been handled by the incredibly versatile stylistic design, and layout options afforded by Cascading Stylesheets (though it seems much longer than that!). A proponent of universally accessible design, and advocate of web standards, valid, logically structured XHTML and CSS code, i’ve struggled many times to mold my own work to properly fit into those rigid (yet reasonable) guidelines, set forth by the W3C and Federal Law.

One of the more difficult, if not more frustrating dynamics of clean CSS design is the challenge presented when the height of an element, a block level paragraph for example, is limited because of little or no content therein. This difficulty is realized when the designer has been relying on that element to properly space or separate other page elements– such as a footer to appear a few hundred pixels below a left column navigation unit, or the size of an element’s background to extend 100% of that element’s often dynamic vertical length.

Today i encountered one of these such challenges, and i came up with a new approach to ‘working around’ it. My ‘main column’ div, which is bordered top and bottom by header and footer, and on the left by a column containing the site navigation, was coming up short and i was experiencing undesirably overlapping elements. The content of this PHP web site is mostly static– none of the pages change in size. To be specific, the problem here is a result of the left-column navigation needing about 500 pixels of page height so that none of the navigation overlaps with footer, a separate div which can ‘move’ up and down depending upon the height of the main colum– which itself is affected by the amount of content therein; its height directly relative to the overall height of the text and images on the page. My expectation was that the content of each individual page would afford enough spacing per elements between the header and footer, so there would be ample distance between the images in my footer, and the buttons in my left column navigation. The project was wrapping up and yet there remained a singular page, which had so little content that the footer images were protruding up into the navigation. In order for ‘fix’ this problem, i knew that i needed to create more occupied space in that main column so that the footer would essentially be pushed down, away from the other elements– so there’s no conflict over space– particularly no overlapping images. But how am i going to add content where there simply isn’t any more text from the client, nor are there any more images– nothing to push the footer down, away from the navigation.

My solution was to create a PHP for() loop which would output as many background images as i needed to increase the gap between the footer and the navigation. If you’ve ever had this problem, you probably know exactly what i’m talking about. If you haven’t had this problem, then you’re probably either not designing with CSS, or you’re quite the CSS prodigy in which case you’re likely not reading this article.

For those of you who are looking for ideas on how to deal with these spacing issues (without the use of tables, or several <br />s), i recommend you take a look at this code. The image used for the background is about 10px high– is the same image which is repeated to create the background on every page, so the blending is perfect. I hope this might help you in your own designs!

NOTE: the <p> element will cause your code to be semantically incorrect in terms of Accessibility– meaning, you will have several “blank” paragraphs in a row. to those of us who can simply view the web site, we won’t recognize by sight that there’s anything wrong, but a screen reader (audio) might wonder why there are so many paragraphs w/out any text in them. this is something you may want to research on your own. it is similar in a way to putting a lot of <br />’s in a row instead of using CSS margins. use your own judgement. i’m still looking for a better way to do this, so if you find it, please let me know, and i’ll be happy to post your solution, and credit you!

<div id="spacerloop">
<?php
for ($x = 0; $spacers = $x+1; $x++) {
echo "<p style=\"background-image=maincol.gif\">&nbsp;</p>";
// without the ‘nbsp’ character echoed here,
// the bg image height will not be output by
// the browser and therefore no added space.
if ($spacers==3) {
break;
}
}
?>
</div>


Enjoy! PS. Previous to July 16, 06, this code was a bit incorrect. i had a mix of my working code in w/ the code to suffice for the example. although the old code would most likely have worked, there was an error in the following HTML style attribute code — note the extra quote mark before the image file:

<p style="background-image="bggrad.jpg">&nbsp;</p>

also, there was a variable listed which didn’t need to be there– as you may have noticed, it was used for nothing. to bring it all together, if you’d like to use the code in your php script, instead of just as a standalone in html as the above would do, you could change it like so:

<?php
$spacerblock=""; // setting the variable so the concatenations can be added without error

for ($x = 0; $spacers = $x+1; $x++) {
$spacerblock .= "<p style=\"background-image:backgradnt.jpg\">&nbsp;</p>";

if ($spacers==3) {
break; // once we've added 3 instances of the blank paragraph code, we can break out of the FOR loop
} else {
echo $spacerblock;
}
}
?>

if you have your own version of a solution to this problem, please send it to me and i’ll post it here, not as a comment here, but linked from here, as a new post credited to you.

i’d like to mention that i no longer believe this to be necessarily the best way to handle the need to stretch a div horizontally so all of the floated content within that div will fit without the subsequent div’s pushing up into it, causing an unwanted appearance.

instead of the above, which i still endorse by the way, try doing this:
simply put a bit of text in a paragraph tag, similar to what we do above w/ the image, except we’re going to use a special CSS property value to do the work for us, instead of a PHP loop. something like this should take care of the too-short block level element containing floated elements :
<p id="hideme" > and the accompanying CSS:
p#hideme {visibility: hidden;}

“…mmm mmm! now that’s good bass!..” — Dan Aykroyd