3 column layout fails to inherit parent DIV height

<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'>
    <div class='float_left' style='width:100px; height:100%;'>
    </div>
    <div class='float_right' style='width:100px;'>
    </div>
    <div class='clear'></div>
    <div class='content'>
         //dynamic content that can change the page length
    </div>
</div>

No matter how many resources or illustrations I reviewed, I am still facing difficulties. I have experimented with various possibilities. Once I assign a fixed height in pixels to the main_container, the sidebars properly expand to take up the full height. However, I cannot specify a fixed height for the main container.

UPDATE:

visual example

The height of the content box is not constant. Currently, the main_container adjusts its height based on the content box, but the sidebars do not adjust their height according to the main_container's height.

htmlcss

Answer №1

Aside from Adrift's solution, you are essentially replacing the height: 100% with height: auto !important - this latter statement takes precedence over the height declaration, despite not being the root cause of the issue.

For a comprehensive solution that functions well in Chrome and other contemporary browsers, do check out this Gist.

Answer №2

This method utilizes CSS table cells to ensure that the left and right sidebars adjust their height based on the central .content panel.

Here is the HTML structure:

<div class='main_container'>
    <div class='left_bar'></div>
    <div class='content'>
        <p>The content that dynamically changes the page length</p>
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
    <div class='right_bar'></div>
</div>

The CSS styling:

.main_container {
    display: table;
    width: 100%;
}
.left_bar {
    display: table-cell;
    width: 100px;
    background-color: lightgray;
}
.right_bar {
    display: table-cell;
    width: 100px;
    background-color: lightgreen;
}
.content {
    padding: 0 20px;
}

See this feature in action: http://jsfiddle.net/audetwebdesign/zahPD/

For specific height adjustments, consider adding height: 100% or height: inherit to the .main_container based on your requirements.

Additional Resource for table-cell: https://developer.mozilla.org/en-US/docs/Web/CSS/display

Compatibility Note
This method is compatible with IE8 and later versions.

Answer №3

If you're working with xhtml documents, remember that div does not support height in percent. To work around this limitation, you can use a trick like the following:

.main_container{
    position:fixed;
    top:0;bottom:0;
    right:0;left:0;
}

For a practical example, check out this link: http://jsfiddle.net/vF6fY/ and see how it's done.

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

What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

$(document).ready(function(){ $("#items").children().click(function(){ $(this).toggleClass('clicked'); }); }); .clicked { background-color:red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s ...

javascriptjqueryhtmlcss

Nested navigation in Bootstrap

I am currently working on creating a multilevel menu using Twitter Bootstrap. Check out the code here Below is the snippet of HTML code: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ...

csstwittertwitter-bootstrap

Guide on transferring three js variable to an HTML label element

For my project, I am looking to pass three js values to the label of a div. The desired output is: stWay: stProposer: stTime: hello John 2017-09-07 I have successfully programmed a button to make div1 a ...

javascriptjqueryhtmlcss

Using FieldSet in ASP.net Forms

Utilizing the FieldSet element in my web application requires me to customize its style. I aim to change the border color to blue and make the legend bold in color. Any guidance on how to achieve this would be greatly appreciated. Thank you in advance. ...

htmlcss

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

javascripthtmlnode.js

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Forgive me if this comes across as rude, but I'm struggling to grasp the concept of apache, PHP, and servers in general. To help myself understand better, I want to create a very basic website that assigns an ephemeral ID to each user (not a session). ...

javascriptphphtmlapache

Modifying JavaScript using JavaScript

I'm looking for a solution to change the URL of a button in sync with the iframe displayed on the screen using JavaScript. The challenge I'm facing is figuring out how to dynamically update the button's URL based on the iframe content. Here ...

javascripthtml

Creating a dropdown menu in AngularJS using the ng-repeat directive

I have recently started working with AngularJS. I am trying to create three tickets using ng-repeat, each containing a dropdown list to select the number of tickets. However, I am facing an issue where the selected number is not displaying in the span. Can ...

javascripthtmlangularjs

Is the z-index feature not functioning as anticipated?

I'm currently working on a project involving a book that flips on click on both sides. The process involves checking the direction when a page is clicked and flipping it to the left if it's not to the right. Additionally, I adjust the z-index to ...

javascripthtmlcss

Integrating fresh models into Django and creating dedicated pages for each

I have successfully set up a model in my Django project where I can create and display posts. However, when I created a new Model, I encountered issues replicating the same process. I tried setting up html files, modifying urls.py, and views.py similar to ...

pythonhtmldjango

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

javascripthtmlcss

Please only choose the immediate children of the body element

<body> <div> <div class='container'></div> </div> <div class='container'></div> </body> Is there a way to use jQuery to specifically target the second container div dire ...

jqueryhtmlcss

How come e.target.value always shows the most recent value?

Starting out in HTML and I have a question regarding input. Here is the HTML code I am working with: <input type="text" value="abc" onChange={(e) => { console.log(e.target.value); }}/> I am puzzled because even though the default v ...

htmldom-events

Ways to avoid single-sided border from overlapping with border radius

When adding a 2px bottom border to a text field with a 4px corner radius on the container, the border tends to curl around the edge due to the larger radius. I am looking for a solution to keep the bottom edge flat. [What I DON'T want: border wrappin ...

cssborder

Thick black border on select list in Internet Explorer version 10

After recently switching to IE10, I couldn't help but notice that all my dropdown lists (select lists) now have a bold black border when in the "dropped down" state, like the example below. Unfortunately, I am unable to inspect the element using IE&ap ...

cssinternet-explorer-10selectlist

What is the best way to navigate through a webpage to find a specific folder and show its contents on the page?

My goal is to design a webpage where users can browse their computer for a specific folder, select it, and have its content displayed on the webpage. I am fairly new to creating pages, but I want to develop a platform where you can easily find and view f ...

javascripthtml

Tips for successfully passing ExpressJS locals variable to an EJS template and utilizing it as a parameter when invoking a JavaScript function during the onload HTML event

const hostname = "192.168.8.154"; const port = 3002; app.use('*', function (req, res, next) { db.collection('sys_params').find().toArray() .then(sysParams => { //console.log(sysParams); app.locals.sysParams ...

javascripthtmlnode.jsexpressejs

Responsive design not functioning properly for Bootstrap columns on website

If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design? I attempted using Bootstrap by setting the top 3 images as <div className="col-md-4"> and t ...

htmlcssreactjsbootstrap-4

Is it possible to transform div containers into unique shapes?

I'm working on a design where I want to have two divs that resemble teeth, one on the top half of the page and the other on the bottom half. The concept is to make these mouth piece divs open and close as you scroll with the mouse, revealing the conte ...

javascripthtmlcssreactjs

Avoid displaying the HTML formatting whitespace on the webpage

I'm working with cakephp's helper to generate spans using the code below: <div id="numberRow"> <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', & ...

phphtmlcakephp