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. .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:
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