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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Height: 100 % ?

  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Height: 100 % ?

    Hi!

    If you look at this site: http://www.behrentzs.com/sites/webtjenesten/design2.php

    the height of the 2 sidebars is not 100%. I tried to set that in the css, but with no result. Here's my css for the 2 colums and the main row:
    Also, the content isn't stretching 100% of the site. If you look at the most outer right side, you will see some white space. How to correct it?

    Code:
    #leftmenu {			width:14%;						
    					height:100%;
    					background-color:#567;
    					float:left;
    					border-right:1px solid black;
    					font-size:9px;
    					}
    					
    #rightmenu {		width:14%;
    					height:100%;					
    					background-color:#567;
    					float:left;
    					border-left:1px solid black;
    					font-size:9px;
    					}
    					
    #tekst {			width:69%;						
    					background-color:#fff;
    					border-top:1px solid #000;		
    					padding:1%;
    					float:left;
    					font-size:9px;
    					}
    Can anybody give me a hint on what to do??

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Did you try-

    * {
    margin: 0;

    padding: 0;
    }

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Yes, I have that in my css as well (view source of the link provided).

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    It may because you have padding:1%; for #tekst, and you do not for the #leftmenu, and #rightmenu?

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    No, the padding does not affect it. There might be a problem somewhere else. I just can't seem to find it.

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    I think you might try to remove the padding in #tekst, it worked for me.

    See http://www.moderntimes.com/tmp_3/

    That is if you want all three cols to align?

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I tried to remove it, however no difference in the height. I also can't see no difference in the height in your example.

    I want the 2 columns in the sides to go all the way to the bottom of the browser, no matter how big the resolution is. I just can't make em'?

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    I did not fully understand your question. The height property is calculated with respect to the height of the containing block. If you want to extend the rt, and lf, cols to infinity you might want to make them part of a background image.

    You might want to check this out.

    http://www.alistapart.com/articles/fauxcolumns/

    Good luck,

  • Users who have thanked michael180 for this post:

    CaptainB (10-28-2007)

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Ah, that seems like a pretty good and easy solution.
    However I'm using percent (%) for widths and heights on this design, so how would I make an image that fits? Cause' when using percent for that kind of properties, the width and height isn't exactly the same on different resolutions I guess.

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    I would avoid using %'s, you know how wide your cols need to be. Those dims will hold regardless of monitor resolution. The only problem you might run into is that if the viewer to your site increases the type size in his browser, and that none of us can control. Give it a try.

  • Users who have thanked michael180 for this post:

    CaptainB (10-28-2007)

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Okay, I tried it, however it didn't work out as intended, mainly because I didn't think before I asked.

    So, here goes: How would I make all my columns stretch to the hight of the browser, and expand when more content is added? I found this: http://www.communitymx.com/content/a....cfm?cid=BAD95

    However with the technique descriped, I can only make it work in IE6, so that all the columns will be 100 % height - they won't expand more when more content is added.

    I know my question is a little confusing, but I hope you understand anyways

  • #12
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Or wait! I've made it work in IE6 with the technique desribed in Michael's link. However it only works in IE6.

    http://www.behrentzs.com/sites/webtjenesten/design2.php

    Anybody got a clue on how to fix it for FF too? (css in view source of the page)

  • #13
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    body { background-color: #556677; }

  • Users who have thanked jlhaslip for this post:

    CaptainB (10-28-2007)

  • #14
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    jlhaslip, you're my hero!

  • #15
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    jlhaslip, you're my hero!
    I suggest you raise your standards...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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