www.webdeveloper.com
Results 1 to 6 of 6

Thread: Element height problem.

  1. #1
    Join Date
    Aug 2004
    Location
    San Antonio, TX
    Posts
    564

    Element height problem.

    Ok, I'm not sure how to explain this but here goes...

    If I create a navagation area that floats to the left within the parent element and another element that will be to the right of that - say that's the body.

    Ok, so we have the navagation area (to the left) and the body of the page (to the right of the nav area). I think this should be a standard layout.

    So here's my problem - or question??? I can't figure out how to make the background area of the nav area the same height of the body area.

    I want the nav area to have a blue background and the body area to be white AND I want the nav area's background to stretch to the height of the body so that if the body is 1000px's long so will the blue background in the nav area.

    You know with tables, the <td> to the left of the second <td> will have the same height. HOW do you do this with CSS?? Can you??

    Thanks.

    Answers to all your questions can be found at: PHP Manual

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  3. #3
    Join Date
    Aug 2004
    Posts
    142
    Quote Originally Posted by rch10007
    You know with tables, the <td> to the left of the second <td> will have the same height. HOW do you do this with CSS?? Can you??
    An alternative to the image suggestion above is to use a very thick padding, and then a negative margin to pull your sidebar into that area. It's a little trickier conceptually, but you save on an image, and it doesn't lock you into a fixed width. (No, I don't want to hear about your 3000 pixel width images...)

    Here's a super-quick example of what I mean: http://uwmike.com/layout/bordercolumn/

    You can tile images in both areas with no trouble at all. This is a similar method to that which Piefecta uses, but I've just stripped it back so that you can more easily see what's going on.

    (Like I said, I just made that it a few minutes, so please don't assume that it's been bug-tested across a lot of different browsers... I only checked FF and IE6)
    Homepage of Michael Purvis

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  5. #5
    Join Date
    Aug 2004
    Posts
    142
    I just noticed that the original poster was asking for a left-side sidebar. Well, here's the identical markup, with two slightly altered sets of styles depending on where you want the sidebar:

    http://uwmike.com/layout/bordercolumn/?style=left
    http://uwmike.com/layout/bordercolumn/?style=right

    (Just to note-- the left-side styles are a little awkward, and although I can't verify this, I think based on my experience, you might get a horizontal scrollbar in Safari. There's cleaner ways to do the left-side sidebar, but this was the first one I found that didn't bork IE.)
    Homepage of Michael Purvis

  6. #6
    Join Date
    Aug 2004
    Location
    San Antonio, TX
    Posts
    564
    Thanks for the replies. I will try to wrap my head around this code from mikepurvis to adapt it for different situations, like a nested 2 column layout inside of a 3 column layout.

    Answers to all your questions can be found at: PHP Manual

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles