The container's div height refuses to expand based on the content within

Why isn't my container div adjusting its height when the content div expands? I need the summary div to grow along with the house-address div, as shown in the code snippet below. Any assistance would be greatly appreciated.

HTML:

<div class="summary shortS">
    <div class="house-address">
        <h2>booboo</h2>
        <p>hehe hehee hdhddgf jfhfjf lkjgkhgh kjgkjg itutiut mhvjhgjhfg nbcncnb nbcnbc</p>
    </div>
    <div class="house-price">
        <h4>$17272</h4>
        <p>Guide Price</p>
    </div>
    <br style="clear:both;" />
</div>

CSS:

.summary.shortS {
    display: block;
    height: 64px;
}

.house-address {
    width: 400px;
    float: left;
}

.house-price {
    width: 150px;
    float: right;
}

Answer №1

Remove the height: 64px property.

http://example.com/abc123/

UPDATE: It is recommended to use min-height: 64px for the preferred style.

Answer №2

The issue lies in setting a specific height for the element when it also has a class name of shorts, which restricts its size regardless of content:

.summary.shortS {
    display: block;
    height: 64px;
}

Instead of using height, consider utilizing min-height if a set height is necessary for visibility, even when empty:

.summary.shortS {
    display: block;
    min-height: 64px;
}

Alternatively, you can simply remove the height declaration entirely.

Check out JS Fiddle demo here.

Answer №3

.overview.briefS {
display: block;
minimum-height: 64px;
height: automatic;
float: left;
}

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 W3C validator verifies the cached iteration of the website

Click here The most recent error is on Line 420, Column 42: Found a stray start tag script. <script src="/skin/sayan_health/js/nc.js"></script> However, I managed to fix this error by placing the script tag inside the body tag. When I inspec ...

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

PHP Loop creating additional space in recurring section

I'm facing a perplexing issue that I can't seem to figure out. When I use the code provided below, it creates an extra blank row on my webpage. Interestingly, this code works perfectly fine on other pages without any issues. Although I have set t ...

div value causing erratic behavior in cycling process

Instead of following the normal balance calculation (1000-950), something odd happens and the balance goes from 1000 to 0 with the while loop. I never intended for the refBalance to drop below 0. (numDebit2() returns 50) <div class="elemen ...

ElevateZoom encountered an issue: $(...).elevateZoom function is not recognized

I'm facing an issue, and here is the error message I received: jquery.elevatezoom.js:39 Uncaught TypeError: $(...).elevateZoom is not a function(anonymous function) @ jquery.elevatezoom.js:39 Specifically, Line 39 and everything related to it: ...

Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed ...

A guide on retrieving all the table data and displaying it in the user interface using templates in Django

I am working on a Django project where I have created a model named "Files" with fields such as Id (auto-generated) and file_name. My goal is to retrieve all file names from the database and display them as a list on the user interface. To achieve this, I ...

How to assign attributes to multiple menu items in WordPress without using JavaScript

I'm currently working on adding attributes to each item in my WordPress navbar. Here is what I have at the moment: <ul id="menu-nav-bar" class="menu"> <li><a href="#text">text</a></li> <li><a href="#car ...

JavaScript Calculator experiencing difficulty with adding two numbers together

I've been working on developing a calculator using HTML and JavaScript, but I'm facing an issue when trying to add two numbers together. Strangely enough, when attempting to calculate 1 + 0, I get the result of 512, and for 1 + 1, it returns 1024 ...

A convenient npm tool for combining HTML files into a single document

I have a specific need to combine several HTML files into a single file. This involves eliminating the HTML tags and HEAD tag from each file, then merging them into one file with only one set of HTML and HEAD tags. I am wondering if there are any existing ...

issues stemming from the css of leaflets

This is my first time using leaflet and I am encountering a CSS issue. I'm not sure if there is another CSS file for leaflet, but whenever I try to adjust its position, it changes unexpectedly. I have a floating nav bar that should appear when scroll ...

Obtain a background image or text that fills the width without repeating, and does not stretch vertically

Looking for some help on achieving a background image or text that fills the width without stretching or distorting vertically, and only showing up once. I'm struggling to figure this out. Appreciate any assistance. Edit: Additionally, I need the hei ...

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

What is the best way to position a success alert in the center of the page?

My application displays a success alert using Bootstrap when a user updates or inserts data and the return value is 1. However, this alert appears at the end of the page, and I want it to be positioned in the middle of the page or at the footer of a specif ...

Display a page with sections that have opacity applied, identified by the hashtag #section, and utilize JavaScript to automatically scroll to the top of

Check out my app at . I'm working on overriding the scroll bar behavior in CSS to keep the entire app visible, including the logo, header, and controls, as users navigate through different sections. However, I seem to be having trouble with the CSS as ...

"Using a triangular background shape in JavaScript instead of a traditional circular

I want to add a unique effect to my site inspired by the AnimatedHeaderBackgrounds demo available at this link. My twist on this effect involves using upward-moving triangles instead of circles. I've explored various resources, including Stack Overfl ...

TinyMCE single quote

Currently, I am utilizing the latest version of TinyMCE as my text editor. While it has many great features, there are a few persistent issues that have been causing me some confusion. One major issue is with apostrophes. For example, Hello it's me! ...

Tips for exchanging divs in a mobile view using CSS

Illustrated below are three separate images depicting the status of my divs in desktop view, mobile view, and what I am aiming for in mobile view. 1. Current Status of Divs in Desktop View: HTML <div id="wrapper"> <div id="left-nav">rece ...

Obtaining Inner Table Information within a Parent Table through selenium and C#

I am trying to retrieve the count of elements in the outer table using HTML. Here is the code snippet I have been working on: var reports = driver.FindElements(By.Id("Outer Table")); var formss = new List<object>(); foreach(var item in reports) { ...

`Troubleshooting Problems with HTML5 Video Playback on Mobile Safari`

I have encountered a unique situation: Currently, I am developing a "kiosk" application in Safari that features two videos. One acts as a screensaver while the other is supplementary. The screensaver video loops perfectly using: (done on body onload="init ...