March 21st, 2004, 07:23 PM
CSS Height Problem
I'm beginning to convert my site from HTML tables to CSS divs. I am having problems with two of my image borders, both on the left and right side of my layout. Neither of the borders stretch to the bottom of the page. The left border stretches to the height of the content in the current DIV. The right border doesn't appear at all. How do I make to borders stretch to the bottom of the page?
HTML version I'm trying to match:
March 21st, 2004, 11:43 PM
For starters, the reason why the right border doesn't show at all, is because you've only defined it as an id in the head section, but forgot to use the id in the body section. In other words, you've defined the border but haven't used it.
In general, the construction of a css box with borders, corners etc.. is an operation that is slightly more tricky than simply placing an image here, another one there...
The best tutorial I've found on the subject is here:
Study it carefully and you'll master the skill.
Basically, the construction is as follows:
<div -- define the TOP border>
<div -- define the RIGHT border>
<div -- define the BOTTOM border>
<div -- define the LEFT border>
<div -- define the TOP LEFT corner or top image>
<div -- define the TOP RIGHT corner>
<div -- define the BOTTOM RIGHT corner>
<div -- define the BOTTOM LEFT corner or bottom image>
<div -- place the content here, in more than 1 div if needed>