#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    25
    Rep Power
    0

    Exclamation 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?

    CSS version:
    http://www.depiction.net/layoutsliced.php

    HTML version I'm trying to match:
    http://www.depiction.net/?id=tutorials
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    111
    Rep Power
    11
    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:

    http://www.sovavsiti.cz/css/corners.html

    Study it carefully and you'll master the skill.

    Basically, the construction is as follows:

    Code:
    <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>
                    </div>
                  </div>
                </div>
              </div>
             </div>
            </div>
          </div>
         </div>
        </div>

IMN logo majestic logo threadwatch logo seochat tools logo