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
    New Coder
    Join Date
    Nov 2007
    Location
    Pacific Northwest
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Using a .gif & z-index to bridge two columns

    Hi,
    Hope I've done a fair job of creating a decent title.

    http://tinyurl.com/3xfgg9

    *Summary: I have a grey right floating column and a bordered left floating left-content column.

    I'd like the bordered column to disappear behind the grey column instead of having the white gutter space.

    I would also like to know how to continue the grey column to whatever height the content column is. Right now I "hacked" the grey bar down using several paragraph tags.

    /summary*


    Here is my tinyurl of what I'm on for a client: http://tinyurl.com/3xfgg9

    I have a layout with a header, and 3 floats (2 left, 1 right) all contained in a wrapper div.

    My issues are with my #content-right div and with my #content-left div.

    1) I'd like my right grey div to stretch to the height of content-left.
    Do I need to wrap both in a left float div to achieve this?

    2) I would like to have the bottom border line of the left-content to dissapear behind the grey bar, instead of get cut off. Is proper procedure to make the left-content div larger and stack it behind the grey div using z-index?

    Or can I create an image that joins a black line to the grey area, and align it to the bottom of a div with a high z-index?

    Or clear both columns with a div with the line-to-grey image and position it top:-100?

    Thank you for reading and possibly helping me out.

    Go Celtics!

    Here is my CSS:
    Code:
    /* CSS Document */
    
    * {
    background-color : #ffffff;
    margin : 0;
    padding : 0;
    font-family:Arial, Helvetica, sans-serif;
    }
    .headline {
    font-size : 18px;
    font-weight : bold;
    margin-left : 15px;
    }
    #div-img {
    background : url(truck-img.gif) no-repeat top right;
    display : block;
    height : 111px;
    z-index : 3;
    position : relative;
    }
    #header-logo {
    background : url(header-bgv2.gif);
    height : 116px;
    position : relative;
    overflow : hidden;
    top : -17px;
    z-index : 1;
    }
    #header-logo .h1title {
    position : absolute;
    margin-left : 140px;
    font-size : 32px;
    left : 140px;
    top : 35px;
    color : #fff;
    background : transparent;
    }
    #wrapper {
    margin : 0 auto;
    width : 850px;
    }
    #main-menu {
    float : left;
    width : 170px;
    line-height : 3;
    }
    #main-menu a {
    text-decoration : none;
    color: #CC0033;
    font-weight:bold;
    }
    #content-wrap {
    float : left;
    height : 500px;
    }
    #content-left {
    width : 500px;
    float : left;
    border-left-width : 1px;
    border-left-style : solid;
    border-left-color : #000000;
    border-bottom-width : 1px;
    border-bottom-style : solid;
    border-bottom-color : #000000;
    margin-bottom : 10px;
    position : relative;
    top : -15px;
    z-index : 99;
    }
    #content-right {
    width : 160px;
    float : right;
    background : #ccc;
    position : relative;
    top : -35px;
    z-index : 10;
    }
    #content-right p {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px;
    line-height : 22px;
    margin-top : 10px;
    margin-right : 15px;
    margin-bottom : 15px;
    margin-left : 15px;
    background : #ccc;
    }
    #content-left p {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 14px;
    line-height : 22px;
    margin-top : 10px;
    margin-right : 10px;
    margin-bottom : 10px;
    margin-left : 20px;
    
    }
    #footer{
    	clear:both;
    	background: #fff;
    	height:16px;
    	text-align:center;
    	font-size:12px;
    	}
    Last edited by celticsaddict; 02-19-2008 at 10:46 AM.
    Who ranks as the highest? One who does not harm anything. One who never retaliates. One who is always at peace regardless of the other person's disposition. - Buddha

  • #2
    New Coder
    Join Date
    Nov 2007
    Location
    Pacific Northwest
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    31 views and nobody has any ideas?
    Who ranks as the highest? One who does not harm anything. One who never retaliates. One who is always at peace regardless of the other person's disposition. - Buddha

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, so you want the actual gray right column to be the size of the main content in the middle? Just so i understand that part, i get confused easily!!

  • #4
    New Coder
    Join Date
    Nov 2007
    Location
    Pacific Northwest
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I want the light gray to stay the same height as the main content column, and I'd like it if the black bordered content box met up to the edge of the gray column.

    Right now I have the gray column as large as it is by using lots of paragraph tags. I need it to be dynamic and match height with the content.

    Thanks, I recall you helped me with my last question as well!
    Who ranks as the highest? One who does not harm anything. One who never retaliates. One who is always at peace regardless of the other person's disposition. - Buddha

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, as far as getting rid of the space gap, is this what you want?

    just replace divs

    Code:
    #content-left {
    width : 500px;
    float : left;
    border-left-width : 1px;
    border-left-style : solid;
    border-left-color : #000000;
    border-bottom-width : 1px;
    border-bottom-style : solid;
    border-bottom-color : #000000;
    margin-bottom : 10px;
    position : relative;
    top : -15px;
    z-index : 1;
    }
    #content-right {
    	width : 160px;
    	float : right;
    	background : #ccc;
    	position : relative;
    	top : -35px;
            right:30px;
    	z-index : 10;
    }
    let me know, i will work on the rest.

    just so you know the lower the number on z-index, the less important it is for coming to the top!!

  • Users who have thanked jcdevelopment for this post:

    celticsaddict (02-21-2008)

  • #6
    New Coder
    Join Date
    Nov 2007
    Location
    Pacific Northwest
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    JC, thanks for the tips, what I did was increased the size of the content-left div and got it within a pixel of the gray bar.
    I'm a little concerned that if the content-left width is ever 1 pixel larger, the grey bar will jump below to fit everything in... if you have a better method for this let me know.

    As you can see now, the height of the grey bar is still determined by its content, in this case, loads of P tags. How can I get it to dynamically stay the height of the content-left area?

    Thanks for your help, I really appreciate it.
    Who ranks as the highest? One who does not harm anything. One who never retaliates. One who is always at peace regardless of the other person's disposition. - Buddha

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    im not sure if this will work, and if anyone will let me know also, but if you have the left content and the grey bar in a self wrapper, you could set the height of the grey(right content) to 100%.

    so possibly when the content on the left gets larger it will push the wrapper down so causing the right to become larger also.

    ex... im not sure if u have this, im at home right now so i cant see..

    Code:
    #wrapper {
    width:600px;
    height:auto;
    .....}
    
    #leftContent {
    ......
    height:100%
    }
    
    #rightContent {
    ......
    height:100%
    }
    
    
    html
    
    <div id="wrapper">
      <div id="leftContent"></div>
       <div id="rightContent"></div>
    </div>
    not sure, but that might work, good luck man!!!


  •  

    Posting Permissions

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