Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Question Box height fun. Containers need to expand to match the other.

    Hi

    I've a problem I am not sure how to tackle.

    We have a floated menu element on the left hand side and a content section with a margin to positioning it correctly encompassing the center to the right of the page. Both menu and content are in a containing div called main.

    I want the following logic to apply.
    1>IF the menu is higher the height of the content should expand to match it. So that the borders align.
    AND
    2>IF the height of the content is higher the height of the menu should expand to match it. So that the borders align.

    Test page showing problem (1>)here:
    http://dev.famousfriends.co.uk/test.html

    Test page showing problem (2>)here:
    http://dev.famousfriends.co.uk/test2.html

    All CSS is linked to from the pages above.

    I don't want to use conditional statements, as in no javascript, vb script or such like. Looking for a CSS only solution.

    I know that table cells in a row would behave this way but I am avoiding using tables for the layout, for obvious reasons, alongside the fact I am curious to see how/if CSS can be used to tackle this.

    MattyUK
    Last edited by MattyUK; 05-20-2005 at 12:27 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically you want faux columns: http://www.alistapart.com/articles/fauxcolumns/

    Let us know if you need any help after reading that.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Thanks Aaron.

    Yup I reckon I do need help even after that. Thanks none the less. Its a good article.

    I used to use the tiled background trick to provide the columns background colour before. Allthough Id never seen that article before. See http://www.famousfriends.co.uk where it is still up.

    However it isn't the menus background colour that matches simply the CSS borders that must align with each other. That is the bottom of both sections must align with each other no matter which is the highest.

    I guess I could use a transparent gif with the 2 pix borders on each side then tile it, but it wouldn't take care of the following:
    1>Top/bottom borders. I would still need to expand one of the containers to add the bottom border where the gif ended.
    2>If I change the colours via CSS. I'd need to change the images as well.
    3>If I change the sections dimensions via CSS. I'd need to change the images as well.

    So whilst Faux columns are good to know, I am not sure they match what I need to do.

    Any other ideas?

    MattyUK

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Well it still has me stumped. Any ideas anyone?

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I didn't try this directly but it's worth a shot. And looking at your code, it might be easier for you to try than me

    float the #content right.
    make a div in both the #menu and #content. And then style it something like:
    Code:
    (#menu div)
    
    .clearcontent {
    clear: right;
    height: .1px;
    display: block;
    }
    
    (#content div)
    
    .clearmenu {
    clear: left;
    height: .1px;
    display: block;
    }
    Then position it where it will sit on top of the bottom border of the parent div it's in or dead bottom (with a height of .1px it probally will be barely noticeable).

    Since I didn't try it I'm not sure if the div in the #menu will "see" the floated #content and visa versa but it's worth a shot.

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Good Call, best idea I've seen yet.

    No joy however.

    http://dev.famousfriends.co.uk/test3.html
    http://dev.famousfriends.co.uk/test4.html

    I've used the test override css file to action your code. The test file reads:
    Code:
    div#content {
    float: right;
    }
    div.clearit {
    height: .1px;
    display: block;
    background-color: #FF0000;
    }
    div#menu div.clearit {
    clear: left;
    }
    div#content div.clearit {
    clear: right;
    }
    Was definately worth a shot. Any other ideas? Tables would handle this with little problems. But I would like to avoid them for layout dependance.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    It was worth a shot. I have to get ready to do some real work, I'lltry andmess around with it more later.

    One thing though:

    Code:
    div#menu div.clearit {
    clear: left;
    }
    div#content div.clearit {
    clear: right;
    }
    you did try it the other way around didn't you? eg... the #div#menu div.clearit needs to clear right not left. the menu is on the left and the #div#menu div.clearit is in the menu so it's already clearing left. It needs to clear right so it clears the #content. And visa versa.

    still might not work, but it won't written like that.

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by harbingerOTV
    you did try it the other way around didn't you? eg... the #div#menu div.clearit needs to clear right not left.
    Sometimes I can be a plain idiot. I had it the wrong way around. Sorry to say that it still doesn't give an effect. No joy.

    Thanks for your efforts so far. Here's hoping we can work it out.

    Yours hopefully....
    MattyUK

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's impossible without the background image thing. As I understand it, you want both columns to be the same height at all times. If the menu is short and the content is tall, you want the purple menu to extend all the way down to the base of the content, and the other way round if the menu is taller than the content, right?

    You can't create relationships like that without tables, javascript, or the background-image approach.

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Hi AaronW
    It's impossible without the background image thing. As I understand it, you want both columns to be the same height at all times. If the menu is short and the content is tall, you want the purple menu to extend all the way down to the base of the content, and the other way round if the menu is taller than the content, right?
    Close enough, I don't care about the purple background just the CSS border. As in the height of the container itself needs to expand equal that of the other (be that menu or content).

    Ok I hear what you are saying. "not possible via CSS alone."

    I'm not so sure however. My recent thinking is as follows:
    Container div with height set but overflowed when necessary. two divs contained have their height set to 100%.

    I will author a test page of this theory but if it works then how to put it into the current layout will be the next challenge.

    I'll have a quick attempt but you may very well be proved right.

    Cheers.
    MattyUK


  •  

    Posting Permissions

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