When the overflow is set to visible, the background color vanishes

Question

When the overflow is set to visible, the background color vanishes

Here is the CSS code I have written;

#container {
    width: 1300px;
    background-color:green;
    margin:0 auto;
    overflow:hidden;
}

#menu {
    float:left;
    width:20%;
    background-color: yellow;
}

Even after extensive searching on Google, I have been unable to find an explanation as to why the background color of the container disappears when the container's overflow attribute is set to visible.

Could someone provide some insight into why this happens?

Update:

Thank you for all the feedback and responses! :)

Although I am fine with using overflow:hidden, I am interested in understanding its purpose and how to utilize it effectively.

From what I gather, the overflow property determines what happens when content exceeds an element's boundaries, so I am perplexed as to why setting it to visible would cause the container's background color to vanish or alter the container's height.

javascript html css

Answer 1

Answer №1

Due to the elements having float:left within the container, the container's height was reduced to 0, causing the background to be hidden.

To resolve this issue, there are several solutions available:

One solution is to use clearfix:

<div id="container" class="clearfix">
  <!-- insert floated elements here -->
</div>

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Another option is to apply overflow:hidden to the container element, creating a new block formatting context that clears the floats. (Refer to this post for more information)

According to the CSS spec:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

Within a block formatting context, boxes are stacked vertically, starting at the top of a containing block. The vertical spacing between sibling boxes is defined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

Within a block formatting context, each box's left outer edge aligns with the left edge of the containing block (in right-to-left layout, right edges align). This holds true even when floats are present (though a box's line boxes may adjust due to the floats), unless the box establishes a new block formatting context (in which case the box itself may narrow due to the floats).

Answer 2

Due to the elements having float:left within the container, the container's height was reduced to 0, causing the background to be hidden.

To resolve this issue, there are several solutions available:

One solution is to use clearfix:

<div id="container" class="clearfix">
  <!-- insert floated elements here -->
</div>

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Another option is to apply overflow:hidden to the container element, creating a new block formatting context that clears the floats. (Refer to this post for more information)

According to the CSS spec:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

Within a block formatting context, boxes are stacked vertically, starting at the top of a containing block. The vertical spacing between sibling boxes is defined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

Within a block formatting context, each box's left outer edge aligns with the left edge of the containing block (in right-to-left layout, right edges align). This holds true even when floats are present (though a box's line boxes may adjust due to the floats), unless the box establishes a new block formatting context (in which case the box itself may narrow due to the floats).

Answer 3

Answer №2

The reason for this issue is the presence of a floating child element within the container. When a container only contains floated elements, its height is reduced to zero.

To fix this problem, there are several solutions you can consider:

The Empty Div Technique: Insert a
```
<div style="clear: both;"></div>
```
as the last child element.
The Overflow Solution: Apply overflow: hidden to the container element.
The Easy Clearing Approach: Utilize additional CSS and a class on the parent element (clearfix').
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

Answer 4

The reason for this issue is the presence of a floating child element within the container. When a container only contains floated elements, its height is reduced to zero.

To fix this problem, there are several solutions you can consider:

The Empty Div Technique: Insert a
```
<div style="clear: both;"></div>
```
as the last child element.
The Overflow Solution: Apply overflow: hidden to the container element.
The Easy Clearing Approach: Utilize additional CSS and a class on the parent element (clearfix').
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

Answer 5

Answer №3

The reason for this issue is that the #menu does not have a specified height.

Since #container has the height of #menu, the background is not showing.

Make sure to assign a height to the #menu.

#menu {
    float:left;
    width:20%;
    background-color: yellow;
    height:50px;
}

View the demo here.

Answer 6

The reason for this issue is that the #menu does not have a specified height.

Since #container has the height of #menu, the background is not showing.

Make sure to assign a height to the #menu.

#menu {
    float:left;
    width:20%;
    background-color: yellow;
    height:50px;
}

View the demo here.

Answer 7

Answer №4

To ensure that the container div matches the height of the menu div, you can simply set the container's height using jQuery.

$('#container').height($('#menu').height());

Check out the demonstration here: http://jsfiddle.net/er144/1H7aK/

Answer 8

To ensure that the container div matches the height of the menu div, you can simply set the container's height using jQuery.

$('#container').height($('#menu').height());

Check out the demonstration here: http://jsfiddle.net/er144/1H7aK/

When the overflow is set to visible, the background color vanishes

Update:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using jQuery to bind the "CTRL+A" key combination to exclusively selecting a specific region

display rails view using ajax

Personalize the marker design within the Wikitude SDK using JavaScript

Elevate your web design by transitioning from Bootstrap 4 to Bootstrap 5

Styling the background of the endAdornment in a material-ui textfield using React

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

"Unsuccessful API request leads to empty ngFor loop due to ngIf condition not being

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

Error: The global variable cannot be emptied due to an issue with the Ajax request

Is the Javascript framework malfunctioning even though the code is identical to the one on jsfiddle

When the onInput event is triggered, React renders components and console.log() displays different values

What is the best way to merge 60 related jquery functions into a unified function?

Unable to retrieve API data on local server port 5000. Utilizing a database sourced from a CSV file. Unexpected undefined promise response

Establishing the maximum width of a Vuetify expansion panel component

What is the best way to ensure Font-Face loads fonts successfully on iOS devices?

Vue 2.0: Exploring the Power of Directive Parameter Attributes

Using jQuery to trigger several setTimeout() functions in succession

The issue with AngularJS 2-way-binding failing to refresh

Unable to retrieve information using the post method in Express framework

transferring various data from JavaScript page to PHP page