Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member Taffu's Avatar
    Join Date
    Dec 2006
    Posts
    34
    Member #
    14486
    To avoid using tables, I'm using floating div's to create a 3-column page build. However, I'm having trouble extending the left/right divs the full height of the actual scrolling page in association with the center div's content. Using a "100%" height value in the CSS only causes the div's to adjust to 100% of the base height, and does not scale with the content of the center div. Is there a way to fix this?
    Example: http://www.wasdcommunity.com/index1.php
    I've tried oversizing the two side div's and using a hidden overflow method, which doesn't seem to work the way I have it laid out. Essentially, the base of my page uses the following code:
    Code:
     
    #left {background: url(-) repeat-y; width: 15%; height: 100%; display: table; float: left;}
    #center {background: #000000; width: 70%; height: auto; display: table; float: left;}
    #right {background: url(-) repeat-y; width: 15%; height: 100%; display: table; float: left;}
    The center id contains the pages content, while the left/right divs are simply a graphical border. I've tried various methods of forcing the side div's to auto-scale to the center div's content height...but I just can't get it to work for some reason. Any ideas?
    Owner - http://www.project-guild.com (in development)

  2.  

  3. #2
    Member Taffu's Avatar
    Join Date
    Dec 2006
    Posts
    34
    Member #
    14486
    Nevermind...wow, surprised I didn't figure it out sooner. I simply created a "Shell" div that holds the entire page, and it worked like a charm. Disregard! :P
    Owner - http://www.project-guild.com (in development)

  4. #3
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    A lot of people go on about how tricky it is and it's easier to use tables for this, but all you need is one more div........

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yeah, but there's also a goal to make the CSS markup semantic, and avoid redundant divs, so the real challenge is achieving a good 3-column layout with no extraneous divs. Still, I'm a fan of being pragmatic in these situations :-)

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Bah, although I love sematicism (if that's even a word), I usually don't care an extra div or two. I still consider it semantic if a HTML element has a clear function that cannot (or is difficult) to do with a more semantic method. (Kinda recursive there.)
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Senior Member
    Join Date
    Feb 2005
    Location
    Canada
    Posts
    435
    Member #
    8983
    Quote Originally Posted by Taffu
    To avoid using tables, I'm using floating div's to create a 3-column page build. However, I'm having trouble extending the left/right divs the full height of the actual scrolling page in association with the center div's content. Using a "100%" height value in the CSS only causes the div's to adjust to 100% of the base height, and does not scale with the content of the center div. Is there a way to fix this?
    Example: http://www.wasdcommunity.com/index1.php
    I've tried oversizing the two side div's and using a hidden overflow method, which doesn't seem to work the way I have it laid out. Essentially, the base of my page uses the following code:
    Code:
     
    #left {background: url(-) repeat-y; width: 15%; height: 100%; display: table; float: left;}
    #center {background: #000000; width: 70%; height: auto; display: table; float: left;}
    #right {background: url(-) repeat-y; width: 15%; height: 100%; display: table; float: left;}
    The center id contains the pages content, while the left/right divs are simply a graphical border. I've tried various methods of forcing the side div's to auto-scale to the center div's content height...but I just can't get it to work for some reason. Any ideas?
    try wraping the divisions in a div itself, and then make them all 100%, this way they will strech the outside divison as needed, and all three will adjust accordingly, also the w3 website (http://www.w3.org) uses this type of layout
    Thee Pyro Wolf


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com