A DIV element may not have any visible height, even when it contains content

My <div> contains multiple <img> elements, each wrapped in its own inner <div>. Despite setting the outer div's height to auto, it fails to adjust dynamically based on the content. To display the inner divs inline, I've applied a float: left style. However, removing the float allows the outer div to properly adjust its height, but this conflicts with my need for the images to be displayed inline. Any suggestions or solutions would be appreciated.

JSFiddle

HTML:

<div id="gallery">
    <div class="gal-foto">
        <img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img">
    </div>
</div>

CSS:

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
}
.gal-foto {
    float: left;
    margin: 3px;
    position: relative;
}
.gal-img {
    display: block;
    max-height: 150px;
    max-width: 150px;
}
csshtml

Answer №1

Check out the interactive demonstration here . To ensure proper display, simply include overflow: auto; in your main container CSS.

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow: auto;
}

Answer №2

Click here for the JSFiddle link

Include the following in your code:

CSS:

.clearfix { clear: both; }

HTML:

<div id="gallery">
    ....
    <div class="clearfix"></div>
</div>

Answer №3

Make sure to include the clearfix class in your main container:

.clearfix:before,
.clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Then, reference it in your main container like this:

<div class="clearfix" id="gallery">
...
</div>

Answer №4

To ensure the content within #gallery is displayed properly, simply include overflow: auto; in your CSS like this:

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow: auto;
}

Answer №5

If you want to achieve this effect, simply add #gallery with overflow:hidden;

Check out the demo here

Here is the CSS code:

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow:hidden;
}

Answer №6

Ensure to include the following in your stylesheet :

.clearfix {
clear:both;
}

Make sure to insert this line before ending each section: 

<div class="clearfix"></div>

Answer №7

Here is a simple technique: adjust the style of .gal-foto to include display: inline-block

Alternatively, you could use a clearfix for #gallery, by adding the following code:

#gallery:after{
   content: " ";
   display: table;
   clear: both;
}

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

CSS3 Animation for Marquee Image

I'm struggling to create a CSS3 animation for an image. My goal is to have the image continuously wrap around and scroll across the page, but I can't get it to work as intended. Here's a simple snippet of my HTML: <div id="space" class=" ...

htmlcssmarquee

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

When I click a button in d3 to refresh the data on my bar graph, the text fails to update accordingly

I've successfully created a series of data lists that modify the bargraph. Unfortunately, due to their differing x and y values, they end up printing new values on top of existing ones. Shown below is an image illustrating the issue where x and y val ...

javascripthtmljsond3.js

Issues with LESS rendering on the Django production server

After deploying my Django website to the production server, I noticed that the LESS file is being loaded but not rendered. Strangely, everything works perfectly on the local server. Any insights on why this might be happening? ...

cssdjangohtmlless

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

javascripthtmljquerycss

Determining the Number of Sub-Menu Items Using jQuery without Reliance on CSS Classes

I've scoured the depths of Google and SO in search of answers, but nothing quite fits the bill. My mission is to create a submenu without using classes, adding a style attribute to each individual <li> within the sub <ul> that sets a min- ...

javascriptjqueryhtml

The Twitter quote button refuses to function properly if there happens to be a pesky semicolon present in the quote

I have been working on setting up a Twitter share quote button, and have successfully done so with my other quotes. However, I am facing an issue with a quote that includes a semicolon. <a href="http://twitter.com/home/?status=Don\'t talk a ...

htmltwitter

Executing an on-click event on a button in PHP

I've been developing a learning site that involves teachers, students, and different subjects. To organize the registration process, I decided to separate the teacher and student registration pages since they input data into different tables in the da ...

phphtmlcss

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

javascripthtmltwitter-bootstrapcarousel

Is it possible for me to set my HTML body class as ".body" in CSS?

CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...

htmlcsstagsdocument-body

AngularJS bidirectional binding with numerous select choices

I am faced with a unique challenge - I have a list of non-exclusive fields that users want to see presented in a select box allowing multiple selections, rather than individual checkboxes bound to Boolean values in the model. While I know how to create t ...

angularjshtml

Width and left values don't play well with absolute positioning

I am encountering an issue where a div with absolute positioning, which is a child of another absolute positioned element, is not behaving as expected. Despite setting width:100%; left:1px; right:1px on the child element, it extends beyond its parent. < ...

htmlcss

With Vue's new implementation of adding data attributes to the "*" selector, how can I adapt to this change?

Typically, I reset all margins/paddings by including the following code snippet at the beginning of my CSS: *, body { margin: 0; padding: 0; } This method usually works fine since it is overridden by subsequent selectors. However, Vue appends data att ...

cssvue.jsbuild

The border is not properly containing the element within

I've been struggling to create a menu with no luck. My goal is to add a border to all my li elements, but the border consistently appears only at the bottom. Is there a way to make the border wrap around the entire li element? Check out my code here: ...

htmlcss

Decompressing CSS in PhpStorm

I'm currently using PhpStorm version 2016.3.2. Occasionally, I come across <style> tags in my HTML files containing minified CSS code. Is there a way to create a shortcut for unminifying the code within these tags? For instance, the following ...

htmlcssphpstormminifyunminify

Using Styled Components to Implement Background Images in a React Application

I'm currently attempting to pass a background image using a prop, but I'm encountering an issue where it's indicating that url is undefined. const CardImage = styled.div` height: auto; width: 100%; background-size: c ...

javascriptcssreactjsstyled-components

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

I'm looking to redirect a 404 page in my PHP code - where is the best place to do so?

I found the correct code for redirecting 404 errors when a page is not found during redirection. However, I am unsure of where to implement this code in my PHP file. Should I place it within a specific tag on my home page? When I tried placing it at the ...

phphtmlhttp-status-code-404

I am experiencing an issue where the Flex table is not displaying more than 50 rows

I am experiencing an issue where I can't scroll back up with the scrollbar. The table is dynamically filled with data from a database, and when it gets too long, I am unable to scroll back up. Any suggestions on how to solve this problem? If you need ...

htmlcss

What could be causing the audio to not function properly on the webpage I'm working on that has yet to be launched?

As I work on my webpage, I am attempting to incorporate an audio file from SoundCloud. However, it seems that the file is not playing when sourced directly from the SoundCloud website. It works fine when the source is a file stored on my computer. <aud ...

html