The CSS background color does not appear within a nested <DIV> element

I am struggling to make the yellow background color appear with the nested divs in three separate columns. Can someone help me figure out what I am doing wrong?

<div id="wrapper">
   <div class="rightside">
   Test
   </div>
   <div class="rightside">
   Test
   </div>    
   <div class="rightside">
   Test
   </div>    
</div>

Below is my CSS:

#wrapper {

  background-color: yellow;

}

div.rightside {

  width: 31%;
  margin: 0 1.33333em 0 0;
  display:inline;
  float:left;   

}

Check out my code on jsfiddle: http://jsfiddle.net/yPX5Q/2/

Thank you! Cheers

csshtmlbackground

Answer №1

Ensure that your wrapper div has the CSS property overflow:auto

#wrapper {
    background-color: yellow;
    overflow:auto;
}

Check out this jsFiddle example for reference

When inner divs are floated, it can cause the wrapper div to lose its height. Adding overflow:auto brings back the expected layout behavior.

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

Styling with CSS3: positioning floating divs on top of a non-floated div

Checkout this fiddle here: http://jsfiddle.net/PA5T5/1/ I've got a setup with 3 divs - 2 are floated whereas one is not. The two floating divs are positioned on top of the non-floating div. I'm wondering if this approach is correct or if it&apos ...

css

Updating the Progress Bar in Shopify when the "Add to Cart" button is clicked: A step-by

I'm currently working on implementing a shipping progress bar on my Shopify Theme. However, I've encountered an issue where the progress bar does not update correctly unless I refresh the page along with the content text. Can anyone provide guid ...

javascriptcssprogress-barshopifyprogress

How can I replicate the Firefox style in IE8 using Bootstrap and CSS?

My webpage is styled with Bootstrap v2 and looks great in Firefox. However, I'm struggling to apply the same CSS color style in IE8: .navbar-inverse .navbar-inner { background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #fab ...

csstwitter-bootstrap

Tips for combining two property values to create a unified data table column in Angular 7's data table system (e.g. merging first and last names into one column)

I need to combine the first name and last name of a person into a single "Name" column in my Angular 7 data table. The first name and last name are stored as separate properties. <data-table [items]="userItems" [itemCount]=" ...

htmlangulartypescriptangular7angular2-forms

Linkage Transformation

Seeking a solution for managing dynamic links. Imagine having a basic link like this: <a href="~/Test/Test.pdf" target="_blank">Test Dynamic Links</a> If there is a button or input that allows users to replace that link with another, how can ...

jqueryhtmlhyperlink

Best Practices for Implementing an Autocomplete Search Box in HTML

I'm currently working on implementing the code below and I could really use some guidance. Despite reading and watching Google Developers' YouTube videos, I am still struggling as I am new to this. My main goal is to integrate an autocomplete sea ...

htmlgoogle-maps

Customize Timevis by adjusting the font size with your own CSS styling

I am looking to create a timevis plot where the font size varies based on the importance of each variable. While I can change the font color using the 'style' option in the source data frame, attempting to adjust the font size in the same manner ...

htmlcssrshiny

Working with both Javascript and jQuery code within a single HTML file

I recently created a website and on one of the pages, I added some jQuery elements like a start button and progress bar. However, when I tried to implement a JavaScript timer on the same page by adding the script into the header, the jQuery elements stoppe ...

javascriptjqueryhtml

The email validation UI dialog is failing to display any dialog

<html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"& ...

javascriptphphtml

Conceal the background of the lower div when the top div is displayed

I am struggling to figure out how to achieve this, or if it can even be done: <body> has a background image <div parent> has a background image <div child></div> does not have a background </div> My goal is to make the chi ...

htmlcss

Using the drop and drag features within a table cell

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> & ...

phpjavascriptjqueryhtml

Insert a page break after content for desktop browsers

Is it possible to control the display of sections on different screen sizes? I have a page that looks good on 15" laptops, but larger resolutions cause the next section to appear on the first screen. Is there a way to show the next section only on th ...

javascriptcsspage-break

Unable to alter the background color in a table row when a condition is verified

Within my 'work' array that is generated from an Excel file, I have values for employee_id (referred to as id), projects, and hours. Additionally, I have another array called 'employees' which contains all the employees in my database. ...

phphtmlcssarrayslaravel

Error message not being displayed during AngularJS form validation

I am currently working on implementing form validation using AngularJS, but for some reason, the required message is not being displayed on the page. Can anyone provide guidance on what I might be overlooking? I am new to AngularJS and I am in the proce ...

javascripthtmlangularjs

Mastering the placement of script tags in your Next.js application with Next Script

I'm in the process of integrating a third-party script into my Next.js website. This particular script adds an iframe right below its corresponding script tag. Therefore, it is crucial for me to have precise control over the placement of the script ta ...

javascripthtmlreactjsnext.js

The issue with Three.js responsive canvas is that it fails to properly adjust the size of the

I'm currently working on a threejs basic scene and attempting to create a responsive canvas for a full-screen experience. However, the mesh inside the scene is not resizing correctly as expected. Instead of remaining a cube, it distorts into a rectang ...

javascriptcsscanvasthree.jsresize

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

input.not(li.tagit-new >input) { background-color: lightgrey; } <ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all"> <li class="tagit-new" style="box-shadow: none;"> <input ty ...

htmlcss

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

htmlcssborderpseudo-element

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

javascriptjqueryhtmlcssnode.js

Arranging Bootstrap inputs horizontally with lengthy labels

When placing two input fields in a row, such as a drop down menu, with labels of varying lengths, the alignment of the inputs can become skewed. This issue persists even when attempting to add breaks in the code due to unpredictable wrapping behavior at di ...

htmlcsstwitter-bootstrapbootstrap-4alignment