Automatically resizing a multi-part CSS background based on content dimensions

My current CSS project has hit a snag that I can't seem to solve:

There is a box on the left side of the site that contains three images - a top image, an optional and stretched middle image, and a bottom image.

I want this left box to automatically stretch if there is more content inside, just like how it already works for the right side with my current code. (Both columns are inside a container div, and the left box is set to height: 100.)

However, when I try to add content to the left box, it overflows because I have set its position to absolute. This prevents it from increasing in size.

I have tried various methods like float, but so far I haven't been able to achieve the desired effect without using position: absolute.

Below is an example of the 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>

And here is the corresponding 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 */
}

The structure looks like this (Color-coded for clarity):

https://i.sstatic.net/xw5a1.png

The yellow section is meant to be a stretched image, which I have omitted for simplicity, but it functions as intended.

Is it possible to add text to the left box that will also stretch it? Or should I switch to using a TABLE instead of CSS at this point?

EDIT: Here is how BitDrink's solution appears in my browser (current version of Firefox)

alt text http://img502.imageshack.us/img502/1241/layoutsample2.png

Answer №1

It's possible that I may be mistaken, but it seems that your goal is to create two columns of equal height regardless of the amount of text in each column.

If you're looking for a CSS technique to achieve this, you can check out Equal Height Columns using CSS, which involves giving backgrounds and bottom curved edges to the div#vertical stretcher.

Alternatively, using JavaScript is another option to make two columns equal in height. You can refer to The Filament group article on setting equal heights with jQuery for more information.

Answer №2

One issue lies in the absolute positioning! To achieve automatic resizing (vertically) of the left box, simply add "float:left" to #bgtop! Keep in mind that the "min-height" attribute may not be universally supported by all browsers (such as IE6)! Below is a sample code:

<style type="text/css" >
#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    min-height: 280px; /* Combined height of the top and bottom images */
    width: 100%;
    background-color: orange;       
}
#bgtop {
    float: left;
    width: 185px; /* Width of the background 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; /* Repeating image goes here */                             
}
#content {
    margin-left: 200px;     /* Text starts 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"> 
                top text                                           
                    <div id="bgmiddle">
                        middle text
                            <div id="bgbottom">
                            bottom text
                            </div> 
                    </div>
            </div>
         <div id="content">
         The content here will automatically stretch the container vertically (and the left box as well!)
    </div>
</div>
Footer etc<br/>
</div>
</body>

The resulting 4 div(s) will adjust their height based on the content!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

**Issue Resolved:** Looking to have the form results appear only when a valid input is submitted; otherwise, the

As a newcomer to PHP, SQL, and HTML, I've been learning for around 3 months now. Can someone assist me in achieving the following: I would like my form to display the results table only if a valid search has been submitted, showing only the database r ...

A solitary block positioned at the heart of a grid - jquery mobile

Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it. In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered. JSFiddle L ...

The network tab is failing to display the CSS styles being applied to the selectors

Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...

`Using a PHP function parameter within an array: An essential guide`

I'm encountering an issue while declaring a function parameter within my array. Here is the simplified version of what I have: function taken_value($value, $table, $row, $desc) { $value = trim($value); $response = array(); if (!$value) ...

Arranging two DIVs side by side

I am struggling with positioning a promo image next to a dropdown menu, which consists of several DIVs. Currently, the image is displaying below the menu due to using inline-block and block properties in the CSS styles. .menu{ background-color: whi ...

Identifying CSS div tags in CakePHP with unique class names

After running cake bake, a test installation was created resulting in the Product Controller and its associated views such as index.cpt, add.cpt, edit.ctp, etc. Upon inspecting the CSS file linked to these views, I noticed two specific divisions: action an ...

Novice problem with the <div> tag

I am currently in the process of developing a website, and I have encountered an issue with the title not staying within the designated div box at the top of the page. <div style="width:1000px;height:40px;background:grey;border:3px solid;border-radiu ...

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

Issue with CKEditor within a ColorBox dialog box

Could someone please assist me? I am facing an issue with my HTML page where I have incorporated a ColorBox modal popup. Inside the ColorBox popup, there is a CKEditor. The problem is as described below: In Internet Explorer, the CKEditor functions proper ...

What might be the reason behind Chrome occasionally not updating the page when I resize the browser window?

Currently, I am in the process of developing a responsive design site prototype. Everything is going smoothly except for one peculiar issue that only seems to occur in Chrome. Sometimes, when expanding the window, the browser appears to get stuck between s ...

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Visit this page, then click on the next button to navigate to the time slots section. As you hover over any time slot, you will notice a change in appearance. Despite inspecting Chrome's developer tools, I was unable to locate a style with a hover dec ...

Improper Placement of Bootstrap 5 Modal

I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

Difficulty with Flexbox in Internet Explorer 11 when utilizing a Bootstrap .badge element

At the moment, I am dealing with a flex-row that contains an element that grows with the available space and a badge that should be aligned to the end without growing. However, when using flex-grow: 0 in IE11, the span.badge does not even take up the width ...

Tips for organizing components in jQuery Mobile

Displaying a survey creation form: <!-- HTML structure --> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> Create Survey </h1> </div> <div id="main" data ...

Unable to extract text input from form

When designing a form for users to change their password, I encountered an issue where passing 3 empty Strings instead of a User object resulted in the Strings being returned as empty when submitting the form. Is there a way to retrieve String values from ...

Invisible Angular Material Date Picker Issue

I am facing an issue with the angular material datepicker in my project. The datepicker itself remains invisible, but it functions when I click on its location or where the calendar icon is placed. To make it more clear for users, I have added a button nex ...

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Hi there, I am currently working on developing an application and find myself in need of implementing CSS classes to a form using Collective Laravel "5.2.*". The snippet of code that I have at the moment is as follows: {!! Form::model($user, array(&apos ...

Display a smaller image preview in the product photo gallery

Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here: I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effect ...