The issue of background color not displaying correctly inside a 'div' element

When trying to add a background color to a div with images, I can only achieve it by including the footer within the div, which is not ideal. I want the background-color to be applied only to the section inside the div.

/* CSS */

    div#gallery_contain {
       width: 850px;
       margin: 0 auto;
       padding: 0 5%;
       background-color: #1a75ff;
    }

      footer {
       clear: both;
       text-align: center;
    }
 <div id="gallery_contain">
        <section>
        </section>
    </div>

htmlcss

Answer №1

Ensure that there is text within your div element, or 

define the height directly in your CSS styles
to display the background correctly.

Answer №2

If your gallery container doesn't have a specified height, the background won't be displayed. Adding a height to the DIV or inserting content will make the background color visible.

div#gallery_contain {
   width: 850px;
   min-height: 100px;
   margin: 0 auto;
   padding: 0 5%;
   background-color: #1a75ff;
}

footer {
  clear: both;
  text-align: center;
}

Alternatively,

<div id="gallery_contain">
    <section>
         This is where the gallery content goes.
    </section>
</div>

Answer №3

To achieve the desired layout, one option is to utilize display:block;. Alternatively, you may consider implementing height:auto; width:auto; when content is present.

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

Troubleshooting AJAX hover functionality issue

Here is the content that loads through AJAX: <div class="grid"> <div class="thumb"> <img alt="AlbumIcon" src="some-image.jpg"> <div style="bottom:-75px;" class="meta"> <p class="title">Title< ...

htmlajaxjquery

Transferring data-id to a Bootstrap modal without the use of jQuery

I've come across numerous questions similar to this, all suggesting the same solution of using JQuery. However, incorporating JQuery into my Reactjs project just to pass an id to a modal is something I wish to avoid. Below is my code snippet : <! ...

javascripthtmlreactjsbootstrap-4modal-dialog

Implementation of Django Registration Redux fails to recognize adjustments made to templates

For the past couple of weeks, I've been facing challenges with Django registration redux. Despite incorporating changes such as adding crispy forms and modifying buttons in accordance with the provided documentation, none of these updates reflect on m ...

pythondjangohtmltwitter-bootstrap-3django-registration

creating sleek inline forms with Bootstrap 4

What is the best way to create this form using standard Bootstrap 4.3 tools? https://i.sstatic.net/P05TB.png Here's what I attempted, but unfortunately it didn't work as expected. <div class="col-12 mb-3 form-inline"> ...

htmlcssbootstrap-4

Placement of the image is not above the card (nth-of-type(odd)) when viewed on smaller screens

I have a set of cards that display an image either on the left or right side, depending on whether it's an odd or even numbered card. On smaller screens, only the even numbered cards show the image at the top, while the odd numbered cards hide the ima ...

htmlcssimagecard

Creating a responsive design for Bootstrap divs

I am trying to display 5 images in one row with 5 columns. I have used the following CSS for this layout: .col-half-offset { margin-left: 4.166666667% } This setup works well on the web, but on mobile devices, the layout does not di ...

htmlcssbootstrap-4responsive-design

Endless scrolling feature malfunctioning

On my profile_page.php, the default setting is to display 10 posts (10 rows from the database) for the user. If a user has more than 10 posts, and scrolls to the bottom of the page, the div should expand to reveal the remaining posts (maximum of 10). For e ...

javascriptphpjqueryhtmlajax

Adjust Font Size inside Circular Shape using CSS/jQuery

I have been searching for different libraries that can resize text based on the size of a container. However, my container is circular and I am facing difficulty in preventing the text from overflowing beyond the border. Below you will find a Fiddle conta ...

htmlcss

Accessing a PDF document from a local directory through an HTML interface for offline viewing

As I work on developing an offline interface, I'm encountering an issue with displaying a PDF file when clicking on an image. Unfortunately, the code I have in place isn't working as intended. Can someone please assist me with this problem? Below ...

javascripthtml

PHP problem encountered when trying to assign values to a dropdown menu from an array

Specifically, the error message that I am encountering is: *Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables\index.php on line 38 Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables ...

phphtml

What is the best method for ensuring that cheese rises to the top?

Is there a way to increase the value of the variable cheese? I suspect it has something to do with how the variable cheese is defined each time the JavaScript is activated, but I'm not sure how to go about it. Can you offer some guidance on this? & ...

javascripthtml

Tips for redirecting a URL link to another link with the identical URI

My program automatically sends users to a webpage where they need to enter their username and password. For example, . I have now developed a new page in asp.net and I would like some code on example.html to change the link to . What I am trying to achi ...

asp.nethtmlasp.net-mvc-4asp.net-web-api-routing

Designing a CSS dot leader on the top line against a intricate backdrop

I am looking to incorporate dot leaders after the first line of text using CSS so that it can be used over a texture or image background. Expected behavior: https://i.sstatic.net/6Jsrk.png I have come across a few implementations of dot leaders on the i ...

htmlcssflexbox

Randomly swap images in HTML when a button is clicked

In order to change images randomly on mouse click, I came across this solution: <SCRIPT LANGUAGE="Javascript"> function banner() { } ; b = new banner() ; n = 0 b[n++]= "<A HREF='index.html'><IMG SRC='images/pic1.jpg'> ...

jqueryhtmlcssimage

How to Restrict the Number of Rows Displayed in an Angular 4 Table

Currently, I am faced with a situation where I have a lengthy list of entries that I need to loop through and add a row to a table for each entry. With about 2000 entries, the rendering process is slowing down considerably. Is there a way to limit the disp ...

htmlangulartypescript

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

Store the received .doc file in the database in HTML format

Within my application, users have the ability to upload various document files to the server. I want to ensure that users who do not have Microsoft Office installed can still access and read these documents. My solution is to convert the .doc files to HTML ...

asp.nethtmldoc

Struggling to understand why the PHP/HTML form with a file upload field is not successfully uploading

I've been staring at this code for the past two hours and I can't seem to spot the issue. It's probably something simple, as I keep getting an undefined index error, but it's eluding me. Could you please take a look with fresh eyes? He ...

phphtmlforms

Issue encountered when attempting to print a Bootstrap table using Google Chrome

Encountering a strange issue while attempting to print my webpage in Chrome. Using Bootstrap, I have a table that adjusts perfectly to the screen size but gets cropped when trying to print in Chrome, unlike Firefox where it prints perfectly. Here is a lin ...

htmlcssangularjstwitter-bootstrapgoogle-chrome

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

csstwitter-bootstrapbootstrap-4