Fluid width design with image background problem

Discussion in 'CSS' started by PorterG, Oct 7, 2010.

  1. #1
    I enjoy the challenge of designing fluid width websites, particularly wordpress themes, but I have run-up against an issue I cannot find a solution for. I have included a diagram of my dilemma. In order to create a sidebar/widget background that is image based, you need to have separate images for the top left, centre, right; middle left, centre, right; and bottom left, centre, and right quadrants, relying on the middle centre images to stretch, maintaining a consistent design in any browser resolution. I have not been able to figure out how to make the left and right images of the 'body' of the widget stretch with the dimensions of the dynamic content. I have tried every combination of ' float:left/right', 'width:auto', clear:both, etc I can think of. Please see diagrams below for my current configuration. I know there is a workable solution because I clearly recall once using a vBulletin skin with left and right page shadow images that stretched with the content. Any ideas or clues would be gratefully received.


    [​IMG]

    [​IMG]

    [​IMG]


    .widget-hcontainer{
    background:transparent;
    width:100%;
    height:43px;
    position:relative;
    
    }
    #whl{
    background:url(widget/whl.png);
    width:27px;
    height:43px;
    left:0;
    top:0;
    position:absolute;
    
    }
    #whr{
    background:url(widget/whr.png);
    width:27px;
    height:43px;
    right:0;
    top:0;
    position:absolute;
    
    }
    #whbg{
    background:url(widget/whbg.png);
    background-repeat:repeat-x;
    height:43px;
    position:absolute;
    left:27px;
    right:27px;
    }
    .widget-fcontainer{
    background:transparent;
    width:100%;
    height:23px;
    position:relative;
    float:left;
    }
    #wfl{
    background:url(widget/wfl.png);
    width:24px;
    height:23px;
    left:0;
    top:0;
    position:absolute;
    }
    #wfr{
    background:url(widget/wfr.png);
    width:24px;
    height:23px;
    right:0;
    top:0;
    position:absolute;
    }
    #wfbg{
    background:url(widget/wfbg.png);
    background-repeat:repeat-x;
    height:23px;
    position:absolute;
    left:24px;
    right:24px;
    }
    /*center widget content   */
    .widget-bg{
    background:transparent;
    background-repeat:repeat;
    width:100%;
    float:left;
    
    }
    #wbgl{
    background:url(widget/wbgl.png);
    backround-repeat:repeat-y;
    height:inherit;
    width:17px;
    float:left;
    }
    #wbgr{
    background:url(widget/wbgr.png);
    background-repeat:repeat-y;
    height:inherit;
    width:17px;
    float:right;
    
    
    }
    #wbg{
    background:transparent;
    background-repeat:repeat;
    width:100%;
    }
    #wbg p{
    margin:0 0 0 0;
    line-height:120%;
    word=spacing:2px;
    font-size:.9em;
    color:#009999;
    
    }
    h5.widget{
    color:#009999;
    text-align:left;
    margin:8px 0 0 0;
    font-size:.9em;
    
    }
    .widgetcontainer{
    width:100%;
    float:left;
    }
    PHP:
     
    Last edited: Oct 7, 2010
    PorterG, Oct 7, 2010 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is actually a pretty common problem in css when designing multi-column layouts, and there are ways around this. While the results are referring to the layout of an entire page, you can adapt the concept to your widget since it's inherently the same problem which involves using 100% height and background images.

    http://www.google.ca/search?q=css+3+columns+same+height
     
    GWiz, Oct 8, 2010 IP
  3. anupviews

    anupviews Member

    Messages:
    795
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    35
    #3
    #wbg {
    background:url(image.jpg) repeat-y
    }

    Have you tried this?
     
    anupviews, Oct 8, 2010 IP