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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts

    RESOLVED Expanding Divs/Columns

    Hey, guys. I'm trying to implement the expanding div/column trick on my website. I know most of you are already familiar with the way it works - divs placed next to each other (such as a sidebar div & content div) should expand in height once the other div stretches downward. This trick is especially useful for adjacent divs that have different background colors or share a border...

    You'll see, on this page, that the height of the sidebar does not match the height of the content div even though they're in the same container...

    On this page, you'll see the opposite - content div does not match the height of the sidebar div...

    I've used the trick successfully on my other ecomm. website...

    I duplicated the code on the top-most website but I went wrong somewhere along the way...

    I need to fix the CSS w/out adjusting the HTML code. Help?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jihanemo,
    All three of those sites are behaving the same. They are also behaving as they are supposed to.
    To better show it, on your page at http://www.americanchic.net/handbags.html , put a background color on #sidebar like this -
    Code:
    #sidebar {
    
    float: left;
    border-right: 1px solid #dddddd;
    padding: 0;
    width: 215px; /*Width of left column*/
    background: #f63;
    
    }
    For equal height columns you may like the faux columns method that uses an image.

    Here is another method of equal height columns without the use of a full width image.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    ^ Thank you, thank you.

    Good to hear they're behaving as they're supposed to.

    But when I use Firebug to highlight the entire sidebar column, it shows that the sidebar column is shorter than the content div... (content div has white background)...

    Also, the sidebar on the website has a background color on it... ?

    site

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by jihanemo View Post
    ^ Thank you, thank you.

    Good to hear they're behaving as they're supposed to.

    But when I use Firebug to highlight the entire sidebar column, it shows that the sidebar column is shorter than the content div... (content div has white background)...

    Also, the sidebar on the website has a background color on it... ?

    site
    For that site you would need to use faux columns I linked you to. That would be easiest, you just need to make an image that will work for you.


    Something like this as the background of #outerwrapper, repeated on the y axis -
    Attached Thumbnails Attached Thumbnails RESOLVED Expanding Divs/Columns-sunglassesbg.jpg  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks, for the tips again.

    If I understand it correctly, faux column would not work for me since my sidebar div and content div need 2 separate background colors, right?

    I looked hard @ equal height columns - so all I need to do insert a repeating background image on y axis for the sidebar & content divs in order to give the equal heights regardless the amount of content in each?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by jihanemo View Post
    Thanks, for the tips again.

    If I understand it correctly, faux column would not work for me since my sidebar div and content div need 2 separate background colors, right?
    Did you look at the image I uploaded as an example for you? It has two colors though you might not realize it when you look at it if the background color of your browser is white.

    Faux columns is onliy limited by what kind of image you make and the fact it is strictly a y axis thing.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Aaah. I see. Genius. Okay - I'm going to get to work. Thanks, again.


  •  

    Posting Permissions

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