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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2008
    Location
    Finland
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Exclamation CSS Help needed.

    Hopely this content goes to right place. I have to ask someone to help me with a small problem I have with one of my website.

    I have a content element (named as body) that contains a right aligned div, so the body element itself is separated in two parts. I have set the height of these two elements to 100% as default and these are positioned as relative.

    Now, the problem is how do I get the both elements to automatically extend together (like tables do) if I add content more than the 100% of height into another of these parts?

    When having more content than the default 100% of the body element height, this will happen:
    http://listat.verkkoansiot.net/overflow.png

    And when editing the code by replacing the height property of the body div from height:100%; to min-height:100%; the problem with the height is solved but the right aligned div does this:
    http://listat.verkkoansiot.net/scree...min-height.png

    For clearance, I will add the default CSS code here:


    body,html {
    margin:0;
    padding:0;
    background:#C73F17;
    height:100%;
    }

    #body {
    margin:auto;
    height:100%;
    width:90%;
    border-left:solid #000 1px;
    border-right:solid #FFB00F 1px;
    background:#FFFFCC;
    }

    #header {
    height:70px;
    border-bottom:solid #000 2px;
    text-align:center;
    background:#1c1c1c;
    }

    #footer {
    height:25px;
    border-top:solid #1c1c1c 1px;
    background:#000;
    }

    #right {
    float:right;
    width:150px;
    height:100%;
    border-right:solid #FFF 1px;
    background:#1c1c1c;
    }

    #nav {
    height:20px;
    border-bottom:solid #000 2px;
    background:#282828;
    }
    I hope that there's a proper solution for this, without needing to create an oveflow property to produce a side bar.
    Last edited by T.K.; 01-07-2008 at 12:42 PM.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Have you tried, instead of 100% height, try defining it with auto, or inherit? To me the 100% attribute has never been user friendly to me. Im not sure if it will work, but it cant hurt..

  • #3
    New Coder
    Join Date
    Jan 2008
    Location
    Finland
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well, I tried to define the elements using auto and inherit properties, but didn't get it work. Thanks for the tip, though.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    An easier method would be to use the faux columns approach. It uses background images to give the appearance of vertically stretching, equal length columns.

  • Users who have thanked rmedek for this post:

    T.K. (01-08-2008)

  • #5
    New Coder
    Join Date
    Jan 2008
    Location
    Finland
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    An easier method would be to use the faux columns approach. It uses background images to give the appearance of vertically stretching, equal length columns.
    I just might do that, thanks for an advice.


  •  

    Posting Permissions

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