Growing animated backdrop

My website layout consists of a centralized wrapper div containing a header, three columns with dynamic heights based on content length, and a footer. I now want to enhance the design by adding background colors that expand in width to the left and right.

If you'd like to see a demo, check out this js-fiddle example: http://jsfiddle.net/SLvYx/

I initially tried using a background .png with a fixed width for the body, but realized it didn't work well with the dynamic height of the columns. While I'm open to exploring JQuery or JavaScript solutions, my scripting knowledge is limited as I am a beginner.

I've scoured numerous resources in search of a similar case without success. Any assistance would be greatly appreciated. Thank you in advance to anyone who can offer guidance.

EDIT: I came across this post on Stack Overflow (https://stackoverflow.com/questions/1775715/dynamic-table-size-html?rq=1) which suggests using a table layout with specific column configurations. Is this approach recommended, or should I avoid tables altogether?

Here is the code snippet from my demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />  <title>Test</title>
<style type="text/css">
body {margin:0;}
#wrapper {margin: 0px auto; width: 940px;}
#header {background:red; height:100px;}
#content_wrapper {width: 940px; padding: 0px 0px 0px 0px; background: #CCC; overflow: hidden;}
#leftcolumn {background:yellow; width: 470px; float:left; height:auto; min-height: 680px;}
#middlecolumn {background:goldenrod; width: 235px; float:left; height:100%; margin-bottom: -1000px; padding-bottom: 1000px;}
#rightcolumn {background:darkgoldenrod ; width: 235px; float:left; height:100%;margin-bottom: -1000px; padding-bottom: 1000px;}
#footer {background:lightgreen; height:100px;}
</style>
</head> 
<body>

<div id="wrapper">

    <div id="header">
        Header
    </div>

        <div id="content_wrapper">        

            <div id="leftcolumn">
                Left Column<br />(Content here)
            </div>

            <div id="middlecolumn">
                Middle Column<br />(Content here)
            </div>

            <div id="rightcolumn">
                Right Column<br />(Content here)
            </div>

        </div>    

    <div id="footer">
        Footer
    </div>

</div>    

</body>
</html>

Answer №1

Absolutely no need for javascript or tables here. Just good old HTML and CSS will work perfectly fine.

To achieve the desired layout, all you have to do is rearrange your page slightly. Instead of depending on a wrapper div, stack your main sections one after another and then include an inner div within each with the width you want. Check out the revised JSFiddle for reference.

I've included an extra div in each section labeled "inner" (not very semantic, I admit), which is set to the desired 940px width.

Now, for the middle section trick. Create a super wide, short image - perhaps 3000px by 1px in dimensions. Divide it equally into yellow on the left side and darkgoldenrod on the right. Use this image as the background for content_wrapper and make it repeat vertically. This will give the appearance of colors extending beyond the edges. Most modern browsers support this technique.

If you're not concerned about older browser compatibility, consider taking it a step further and use CSS Gradients on content_wrapper's background. You can view an example in this updated Fiddle.

Keep in mind that CSS Gradients won't function in IE9 or earlier versions. However, the image serves as a fallback solution in your stylesheet.

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

Deleting an element from an array stored in local storage with the help of jQuery

Summary: Developing a front-end wish list feature Tech Stack: Utilizing HTML5 (localStorage), CSS, and jQuery Key Features: Ability to add and delete items dynamically with real-time count display Challenge: Issue encountered when trying to remove added ...

Rating of displaying an undefined value (NaN)

I'm having issues with creating a currency conversion calculator, as the result is showing as NaN. Can anyone offer assistance? I've tried multiple solutions but have been unable to resolve it. Check out the following JavaScript code snippet: c ...

"Select2 dropdown fails to function properly upon returning to the page using the browser's

I've encountered an issue while working on a search page with Select2 dropdowns. Everything functions smoothly upon the initial page load, however, problems arise when a user performs a search, hits the browser back button, and then revisits the page. ...

While v-carousel adjusts to different screen sizes, the images it displays do not adapt to

Whenever I implement v-carousel, everything seems to be working well, but there is an issue on mobile. Despite the carousel itself being responsive, the images inside do not resize properly, resulting in only the center portion of each image being displaye ...

AngularJS, the element being referenced by the directive is empty

Currently, I am in the process of transferring a jQuery plugin to AngularJS simply for the enjoyment of it. Previously, when working with jQuery, my focus was on manipulating the DOM using jQuery functions within the plugin loading function. Now that I am ...

Is it possible to implement a universal margin for the homepage design?

I'm working on a landing page where each section needs the same padding on the left and right but with different background colors. Is there a way to apply this consistent padding to the entire page without affecting the individual section colors? Any ...

Tips for successfully transferring values from an onclick event in JavaScript to a jQuery function

I am encountering a challenge with an image that has an onclick function associated with it. <img id='1213' src='img/heart.png' onclick='heart(this.id)'> This particular function needs to be triggered : function heart ...

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

CSS 3 blur filter without the use of transition timing

After discovering a unique method for achieving cross-browser blurring effects, I noticed that the transition wasn't quite working as expected. To solve this issue, I decided to make some adjustments by increasing the transition time and blur amount. ...

What is the best way to align these div elements within a table cell?

I am encountering an issue with the placement of elements. What I am striving for is something like this: https://i.stack.imgur.com/VSFXE.png where a div with several other divs inside is positioned at the top of the td, and another div is at the bottom o ...

Separate line rendering of checkboxes in CSS and Vue

I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox. Here is a sn ...

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

Django SlideShow: Immersive Presentation of Images with Varying Display Times

Hey everyone, I could really use some assistance with creating an image slideshow: I have a couple of Django template variables named "ImagesVar" and "ImagesDurationVar". What I'm trying to achieve is to display "ImagesVar[0]" for the duration speci ...

What are some alternative methods for downloading the latest file version without relying on the client cache?

On my webpage, I have a table displaying users' data. Each row represents a user and includes their business card, which is a clickable tag that opens a PDF file stored on the server. <td class="business_card"> <a href="/static/users_doc ...

Issues with data within a Vue.js pagination component for Bootstrap tables

Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error: <table result="[object Object],[object Object],[object Ob ...

The radio button becomes unchecked when moving to the next fieldset

While developing a dynamic page using PHP and Laravel, I encountered a situation where I needed to add an additional radio button option to each card. Below is the code snippet for the card in question: <div class="card" style="margin:10p ...

Three-column layout using CSS fluid design

The arrangement in Column B below does not look right. I successfully created a 3-column layout with the help of this resource. However, it assumes that fixed columns A and B have the same height or start at the same vertical position. In my case, B has an ...

Building an HTML table dynamically with JavaScript

Can anyone help me figure out why my JavaScript code isn't populating the HTML body table as expected? var shepard = { name: "Commander", victories: 3, ties: 1, defeats: 6, points: 0 }; var lara = { name: "RaiderOfTombs", victories: ...

Expanding the outer div with Jquery's append() function to accommodate the inner div elements perfectly

I am facing an issue where my outer div does not expand automatically to fit the elements I append inside it using jQuery. The structure of my div is as follows: <div class="well" id='expand'> <div class="container"> < ...

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...