CSS Height Problem

Dev Shed Forums Sponsor:

March 21st, 2004, 07:23 PM

depiction

Registered User

Join Date: Mar 2004

Posts: 25

Time spent in forums: 25 m 14 sec
Reputation Power: 0

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

March 21st, 2004, 11:43 PM

lucesei

Contributing User

Join Date: Oct 2003

Posts: 111

Time spent in forums: 11 h 33 m 27 sec
Reputation Power: 5

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>

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Height Problem

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump