Filling a container div to its limit horizontally without exceeding its vertical boundaries

I'm currently developing a website that features a layout with two columns inside a container. The challenge I am facing is ensuring that the container's white background stretches to the bottom of the tallest column. To achieve this, I have implemented the holy grail method.

One requirement for my design is that both columns should extend beyond the white background area (see example which uses a fixed height that I need to be fluid). I know that setting the overflow property to visible can accomplish this, but it disrupts the equal height of the columns.

How can I resolve this issue with minimal extra elements added to the layout?

htmlcssoverflow

Answer №1

To easily resolve the issue at hand, consider inserting <br style="clear:both" /> right before the closing tag for #container.

If you prefer, you can also modify it to <br class="clearfix" /> along with adding .clearfix{clear:both}.

Answer №2

The solution is to utilize inline-block elements.

CSS

.container{
    width:400px;
    background-color:#eee;
    margin:0 auto;
    border:2px solid blue;
}
.container > div{
    width:200px;
    display:inline-block;
    vertical-align:top;
}
.inner{
    background-color:#999;
    margin-top:15px;
    width:180px;
}
.left .inner{
    margin-left:-15px;
}
.right .inner{
    margin-right:-15px;
    margin-left:auto;
}

HTML

<div class="container">
    <div class="left">
        <div class="inner">left panel 1</div>
        <div class="inner">left panel 2</div>
    </div><div class="right">
        <div class="inner">right panel 1</div>
        <div class="inner">right panel 2 with extra text to showcase parent element expansion</div>
    </div>
</div>

check out the demo

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

Tips for including numerous links in a single cell of a QTableView

In my project, I have a QTableView with columns containing data that includes hyperlinks. A delegate class is used to open the linked page in the browser when a cell is clicked in these columns. This works well for linking one value to one page, such as ha ...

htmlc++qttableview

Does the attribute alt="" serve a purpose other than readability for images?

Utilizing the alt attribute for my search widget in WordPress is my goal. With the use of Elementor and WordPress editor, I am able to insert attributes through HTML. <h3 alt="seawater">seawater</h3> After trying out this code on my ...

htmlseoalt

Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have in ...

htmlcss

The children elements inside a parent div with Flexbox are now taking on the height of their container

I am facing an issue with my flexbox grid layout where one column contains a tall image while another column has two shorter images stacked on top of each other. The problem arises when viewing the layout in Internet Explorer, as the height of the smaller ...

htmlcssinternet-explorerflexbox

Achieving click detection on a link within an iframe in Angular 2

Is there a way to detect a click on a link within an iframe? <iframe *ngIf="currentFrameUrl" id="contentFrame" [src]="currentFrameUrl | safe"></iframe> Inside my iframe component, I have a simple code that listens to changes in observable var ...

htmlangulartypescriptiframe

What causes an element with position:absolute to be placed behind the ::after pseudo-element?

Being a beginner in HTML and CSS, I recently encountered a challenge while working on some exercises. My goal was to create a website with a blur effect, so I decided to design a header with the class "showcase" and nested inside it, a div with the class " ...

htmlcss

Modify the div from fixed position to static

Is there a way to prevent the div with the class fixed from staying fixed at the bottom after scrolling over it? I stumbled upon a solution thanks to the comments below. This is my current JavaScript code: var element = $(".below"); window.onscroll = fu ...

jqueryhtmlcss

The program encountered an issue where it was unable to access the property 'ObjectTracker' because it was

I am relatively new to Angular development and I am attempting to incorporate into my Typescript Angular application. Even though I have included the type definitions, I am encountering an issue: MonitorComponent_Host.ngfactory.js? [sm]:1 ERROR TypeErr ...

htmlangulartypescript

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

javascriptjqueryhtmlangularjsmmenu

Tips for applying personalized CSS to individual Toast notifications in Angular

MY QUESTION : I am looking to customize the CSS of a single toast used in Angular components. While there may be multiple toasts, I specifically want to style one particular toast differently. For example, the toast image can be viewed here: example toast ...

cssangulartypescripttoasttoastr

(Background-sizing: Full) encompassing margins

Can anyone assist me with the background-size: cover; issue? I'm facing a problem where the background image I set in the CSS is covering the padding of my image box instead of staying inside the padding. Is there a way to use background: url() and b ...

htmlcss

Interested in streamlining the document upload process - Experimented with the robot class but encountered issues on browserstack. Seeking alternative solutions

Greetings! I have a coding challenge that I would appreciate some help with. Here's the situation: I have been working on automating an upload feature, and I initially used a key press event to successfully run it locally. However, when I tried runnin ...

javahtmlseleniumdombrowserstack

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...

javascriptjqueryhtmlcss

Navigate to a Website Directly in Browser without Pop-up Menu

My website features two dropdown menus and a submit button that redirects visitors to specific URLs based on their choices from the dropdown menus. The problem: Upon clicking the "submit" button, a popup menu appears in the browser as shown in the screens ...

javascripthtmlbootstrap-4

bootstrap 4 - create a responsive two-column layout where the second column displays additional details specifically designed for mobile devices

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous"> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> ...

csshtmltwitter-bootstrapresponsive-designbootstrap-4

Code working in Chrome but not in Firefox: JavaScript hyperlink issue

Within my Rails project, an HTML file displays the following: <a href='#' id="show_advanced">Show advanced options</a> Upon clicking on the link, JavaScript/JQuery code is executed: jQuery("#show_advanced").click(function() { // ...

javascripthtmlruby-on-rails-3

Contenteditable feature dynamically styling text upon input

Is it possible to prevent CSS properties like text-transform from affecting text entered via contenteditable? On my webpage, "CERTIFICATE PROGRAM" is shown in uppercase due to text-transform settings. However, the original input was: Certificate Program. ...

jquerycsshtml

What is preventing the question div and buttons from expanding according to their content?

After experimenting with setting the height of the question div to auto, I found that it would stretch to fit its content. However, I am looking for a solution without overflow: auto or scroll. Is there a limit to how responsive it can be once a certain ...

htmlcss

Create a custom horizontal scrolling feature for a list of images inside a div

Just starting out with react and I have an array of image URLs. My current output looks like this: Output Image Link: Looking to remove the scroll bar at the bottom and get rid of scrolls entirely. Here's how I want it to look: Expected Output: Wa ...

javascripthtmlcssreactjs

Tips for excluding a CSS property from a class override

I have a file called _buttons.scss: .btn { display: inline-block; font-family: $btn-font-family; font-weight: $btn-font-weight; color: $body-color; text-align: center; text-decoration: if($link-decoration == none, null, none); white-space: $b ...

csstwitter-bootstrapbootstrap-4sass