tags:

views:

1056

answers:

2
+1  Q: 

Auto-stretch a multipart CSS background by content size

I am building a CSS site and fail solving this partial problem:

On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.

I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code. (I put both columns into a container div and set the left box to height: 100.)

But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.

I didn't manage to get this effect without position: absolute though. I tried using float etc.

Here is the example code:

    <body>
 <div id="centerwrapper">
  Header etc<br/>
  <div id="verticalstretcher">
   <div id="bgtop">   
    <div id="bgbottom">   
     <div id="bgmiddle">
     </div>
    </div>
   </div>
   <div id="content">
    Content here will auto-stretch the container vertically (and the box to the left!)
   </div> 
  </div>
  Footer etc<br/>
 </div>
</body>

With this stylesheet:

#centerwrapper {
 width: 500px;
 margin: 0 auto;
}
#verticalstretcher {
 position: relative;
 min-height: 280px; /* Sum of the top and bottom image height */
 width: 100%;
 background-color: orange; 
}
#bgtop {
 position: absolute;
 width: 185px; /* width of the bg images */
 height: 100%;
 background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
 position: absolute;
 width: 100%;
 height: 100%;
 background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;    
}
#bgmiddle {
 position: absolute;
 width: 100%;
 top: 250px; /* Don't cover top GIF */
 bottom: 15px; /* Don't cover bottom GIF */
 background-color: yellow; /* Repeated image here */    
}
#content {
 margin-left: 200px; /* Start the text right from the box */
}

It looks like this (Colored it for better understanding):

alt text

The yellow part is actually a stretched image, I left it out for the example, it works as expected.

How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?

EDIT: BitDrink's solution looks this way at my browser (current FF)

alt text

A: 

Hello,

the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop! Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:

<style type="text/css" >
#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;       
}
#bgtop {
    float: left;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    width: 100%;
    height: 100%;
    background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;                              
}
#bgmiddle {
    width: 100%;
    background-color: yellow; /* Repeated image here */                             
}
#content {
    margin-left: 200px;     /* Start the text right from the box */
    background-color: #FFF;
    border: 1px dotted black;
}

</style>


<body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop"> 
                text top                                           
                    <div id="bgmiddle">
                        text middle
                            <div id="bgbottom">
                            text bottom
                            </div> 
                    </div>
            </div>
         <div id="content">
         Content here will auto-stretch the container vertically (and the box to the left!)
    </div>
</div>
Footer etc<br/>
</div>
</body>

You can see the result below:

alt text

The 4 div(s) resize vertically according to their content!

BitDrink  2009-11-05 09:08:57
Thank you. As I said I already tried float left and know that it's the absolute positioning. The problem is that I don't get it to work. When I try your code the left box doesn't appear at all (because it gets assigned a height of 0 in my firefox)
Tarnschaf  2009-11-05 09:33:47
What version of FF you are running? I've tested the code in FF 3.5.4, Safari and IE6 and I don't see any trouble! If you remove the content of the three boxes on the left, it's normal that doesn't appears nothing, because the three div(s) have not a fixed height! What have understood from your question is: you are trying to do a layout with two columns composed by 4 div(s), 3 on the left and 1 on the right, that automatically resize their height in relation of their content! That is what you are trying to accomplish?
BitDrink  2009-11-05 09:55:52
yes. this is the goal. but important is that the left DIVs will automatically resize if the right content is larger (this already works but only with position absolute. Otherwise my height: 100% does not work.Additionally the middle div on the left should only fill the gap between. I don't know how to accomplish this without position: absolute.
Tarnschaf  2009-11-05 10:04:35
So, you would like even that the left div(s) automatically resize in horizontal? One thing it's not clear ... the right content should be larger than what?
BitDrink  2009-11-05 10:10:47
Please look at my first picture: The wrapper has a minimum height even if there is no content left and right. Now if the right content exceeds this height, the left DIVs will also get larger (this works!). My problem was that if I put content into the left DIVs they will not get larger because of the position absolute.
Tarnschaf  2009-11-05 10:18:19
I've understood! (I had misunderstood because you say "larger" instead of "higher"!) However, you can do that changing a bit the HTML code and setting the height to 100% to some div(s) ... but that doesn't work if the container, in this case #verticalstretcher, doesn't have a fixed height!!! It's needed that something is fixed otherwise the content overflow or the layout doesn't work as expected!
BitDrink  2009-11-05 11:34:00
+1  A: 

I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.

Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.

The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.

Matt Smith  2009-11-05 10:36:47
Funny, I was already reading the Equal Height article when I saw your comment. It needed some modifying to work in my particular case, but it solved the main problem.
Tarnschaf  2009-11-05 13:05:36

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?