The div tag fails to render the background color in CSS

After setting my div with id="banner" and styling it to match the image color, I am still unable to see the color displayed. What could be the issue here?

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
}
<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->
    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

htmlcss

Answer №1

When #cloud (the child element of #banner) is floated, it causes #banner to collapse and appear as if it has no content. One way to fix this issue is by including overflow:auto in the styles for #banner.

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
  overflow: auto;
}
<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->

    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

Answer №2

To create a banner with some height, add the following CSS snippet:

#banner {
  background-color: #78c8f0;
  height: 40px;
}

CSS Snippet

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
  height: 40px;
}
<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->

    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

Answer №3

Check out this code sample

The background color wasn't displaying because the element containing the content was floated, causing other elements to behave as if it didn't exist.

To resolve this issue, you can either adjust the CSS for #banner like so:

#banner {
    float: left;
  background-color: #78c8f0;
}

OR

You can update the CSS for #cloud to look like this:

#cloud {
  /* float: left; */
  padding: 0px;
  margin: 0px;
}

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

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

jQuery now enables the number field to accept not only one period but multiple periods

I need to update a number field in a form to accept multiple periods, specifically for entering software version numbers. Currently, the code I am using only allows for one period to be entered, resulting in an error when two periods are added to the fie ...

jqueryhtmlforms

Automatically filling in related information in multiple input fields after choosing a value in a specific input field using JavaScript

My horizontal form is dynamically generated using JavaScript, with each input field having a jQuery autocomplete that retrieves data from a database using the $.get method. I'm looking to automatically populate the second input field with the corresp ...

javascriptjqueryhtml

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

htmlangulartypescript

Multiple sliders all on one page

In a previous instance, I posed the question here: how to turn an image slider into a while loop, but unfortunately did not come across the right solution. However, after making some modifications to the code, it is now functioning correctly. Despite this ...

javascriptphpjqueryhtmlcss

Ways to retrieve user input and incorporate it into the condition within an HTML template

I'm currently working on a lab where I am creating a web view to access data from MySQL. Below is the configuration I have: student\views.py from django.shortcuts import render, redirect from .models import Student # Create your views here. def ...

htmldjango

What is the best way to capture the click event when a child <td> element

Looking to retrieve the content within the <th> tag of the selected <td>. Refer to this fiddle for more information: http://jsfiddle.net/zrccq447/ The challenge lies in handling <th> elements with colspan 2 or 3. Here is the current cod ...

javascriptjqueryhtml

What is the method for importing .scss files throughout a Next.js application?

I'm looking to transform my React app into a Next.js app. In the current React setup, I have .scss CSS files being imported in various components. However, once I transfer the code to a Next.js environment, I encounter an error: Global CSS cannot be ...

cssreactjsnext.jssass

Using Python and Selenium to upload files without utilizing an 'input' HTML element

Struggling to upload a file for Python Selenium? The send_keys method seems to be causing an issue as it returns a 'Message: element not interactable' error. This is likely because the upload button lacks an 'input' in its html code, pr ...

pythonhtmlseleniumfile-upload

What is the best way to allow the user to modify a div's properties using JavaScript?

I am working on a school assignment where I need the values changed in a table to apply to a div. Despite searching online, I haven't been able to find the solution. The blue box represents the div and the text on the left should dictate the propertie ...

javascripthtmlcss

Utilizing arrays to dynamically alter the text color of specific words in an input field

Currently, I am in the process of working on a JSFiddle and find myself a bit puzzled by a certain aspect. Within my project, I have an input box named myTextField which contains a random paragraph. Additionally, there is a button that triggers my change f ...

javascripthtmlcss

How to optimize the loading speed of background images in an Angular application

Utilizing Angular v6, typescript, and SASS for my project. A CSS background image is set for the homepage, however, it's a large photo that always takes too long to load. Custom CSS: @import '../../../scss/variables'; :host { .wrapper { ...

cssangularimage-processingoptimizationsass

Guide on displaying a partial form as a horizontal form in Rails 4

I am facing an issue with displaying a form horizontally instead of vertically in a partial triggered by AJAX on my main page. I have tried various methods like using <form class="form-inline">, <%=f.number_field :pointsSpend, :class => "checkb ...

htmlcssruby-on-railsform-for

Ways to incorporate a search feature for images without relying on a database

Hey there! I've been working on a code that allows users to search for a book by its name and have only the book with that specific name appear on the page. However, I've run into an issue where the search function doesn't seem to be working ...

javascriptjquerycsshtml

What is the best way to format changing text within a paragraph?

If I needed to implement this functionality using JavaScript: ...... if (!isNaN(num)) document.getElementById("isNum").innerHTML = num +" is a number"; ...... Then in HTML : <div> <button onclick="checknum()">Enter any value : </b ...

javascripthtmlcss

What is the best way to ensure that a regex pattern only matches if it begins with the user's

I am working on developing a search bar that identifies whether a brand is Indian or foreign. The data for this search bar is retrieved from a JSON file using the fetch API. Here's a snippet of the code: const matchList = document.querySelector(&ap ...

javascripthtmlregex

Problem with fetching Grails

I have a table nested within an anchor tag. The table is centered on the page, with each row containing an image. When the page loads, I noticed the following: a) The table initially appears at the top-left corner of the screen. b) As there are multiple v ...

javascripthtmlcssgrails

Tips for concentrating on the initial input field produced by an ng-repeat in AngularJS

Currently, I am dynamically generating input fields using ng-repeat and everything is working smoothly. However, my requirement is to set focus on the first input that is generated by this ng-repeat based on their sequenceId values. So far, I have attempte ...

javascripthtmlangularjs

Tips for regularly retrieving information from a psql table

I have a scenario where I am retrieving data from a psql table and converting it into a JSON array to be used for displaying a time series chart using JavaScript. The data that is passed needs to be in the form of an array. Since the data in the table get ...

javascriptphphtmlpostgresql

Activate a button only when a value is inputted into a text box associated with a chosen radio button

I'm facing a challenge with my radio buttons and sub-options. When a user selects an option, the corresponding sub-options should be displayed. Additionally, I want to enable the next button only when text is entered in all sub-option text boxes for t ...

javascriptjqueryhtmlbuttontextbox