Getting 100% height on floated neighboring divs: Tips and tricks

Question

Getting 100% height on floated neighboring divs: Tips and tricks

<div id='container'>
    <div class='left'></div>
    <div class='right'></div>
    <div class='clear'></div>
</div>

If you encounter the scenario above where the floated right div needs to occupy the remaining height of its parent container without an explicit height being set, how would you tackle this challenge? The height of the parent container is dictated by the floated left div.

My usual approach involves utilizing Javascript post-loading to adjust heights accordingly. However, I am curious about alternative, standard, and more efficient methodologies for managing this particular layout quirk.

It appears that structuring a layout in this manner inherently raises complications. Are there feasible solutions beyond resorting to using a <table>?

html css

Answer 1

Answer №1

If you want to achieve this layout without specifying a height on the parent using floats, you can utilize display: table; and table-cell properties to simulate table behavior:

#container { 
    width: 200px;
    background-color: green;
    display: table;
}
.left {
    display: table-cell;
    width: 30px;
    height: 200px;
    background-color: red;
}
.right {
    display: table-cell;
    height: 100%;
    width: 30px;
    background-color: blue;
}

This method eliminates the need for a clearing element and ensures that both divs always occupy 100% of the height when specified.

http://jsfiddle.net/6XagR/4/

Answer 2

If you want to achieve this layout without specifying a height on the parent using floats, you can utilize display: table; and table-cell properties to simulate table behavior:

#container { 
    width: 200px;
    background-color: green;
    display: table;
}
.left {
    display: table-cell;
    width: 30px;
    height: 200px;
    background-color: red;
}
.right {
    display: table-cell;
    height: 100%;
    width: 30px;
    background-color: blue;
}

This method eliminates the need for a clearing element and ensures that both divs always occupy 100% of the height when specified.

http://jsfiddle.net/6XagR/4/

Getting 100% height on floated neighboring divs: Tips and tricks

Answer №1

Similar questions

Crafting visually stunning interfaces with Material UI

What fate befalls CSS rules left untouched?

Tips for arranging headers next to each other on a restaurant menu

Issue with sidebar display inconsistency when resizing the window

To ensure proper formatting, I must include a comma operator for numbers while typing and limit the decimal places to two

Maintaining responsiveness, CSS grid will automatically adjust the height of each element to be equal

Event delegation will be ineffective when the target element is nested within another element

Adding additional elements to a div in a horizontal orientation

Creating a Dynamic Slideshow on Autopilot

Using line breaks and horizontal scrolling in HTML and CSS

Steps for eliminating redundant lines in a CSS drop-down navigation bar

Why is applying CSS on an li element using .css() in JQuery not functioning?

Differentiating between the components and contents of a webpage during the process of web scraping

I am interested in creating a text box that has the ability to gather user input and connect it to a search

Incorporate a background only if the specified condition in AngularJS is met, utilizing ng-style

When I access the website through the LinkedIn app, my CSS styles are getting jumbled up

Tips for specifying headings for a particular div ID

Upgrade your input button style using jQuery to swap background images

Execute an AJAX post request to the identical PHP page (utilizing the Jquery Form Plugin)

Build a home page in HTML with full width design