0

The section tag in the following codepen has its background set to #DFDCE3 but it does not display. It has four div tags with text that does display. Why does the section background not show?

Codepen: https://codepen.io/centem/pen/ZEEQBrO?editors=1100

#content {
  background-color: #DFDCE3;
  width: 50%;
  margin: 0 auto;
}
sg2019
  • 39
  • 3
  • 1
    Did you post the right codepen? It has nothing to do with your question... it has 4 headers and a paragraph; no divs, no section and not the css you posted – BenoitLussier Oct 13 '19 at 13:33
  • Please post the correct CodePen link to sort out your problem. – noobprogrammer Oct 13 '19 at 15:48
  • Oh darn it. Sorry, I corrected the link. – sg2019 Oct 13 '19 at 17:18
  • Please include all relevant information **in the question itself**, preferably as a [MCVE] . Don't rely on external sites like codepen or jsfiddle. – Jon P Oct 14 '19 at 01:11
  • There will be a duplicate for this out there somewhere, can't find it. The base problem is you only have floated content in that div. Floated content is removed from the normal flow, so the parent element, the `section` in this case will have no height. Google the term `clearfix` and apply that, or look at [this answer](https://stackoverflow.com/questions/8554043/what-is-a-clearfix) which is close to being the duplicate. – Jon P Oct 14 '19 at 01:18
  • Possible duplicate of [How do you keep parents of floated elements from collapsing?](https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) – Jon P Oct 14 '19 at 01:20
  • @Jon P I understand that you're trying to help, but the error was completely reproducible with the code provided. Also, the question that you linked as a possible duplicate is itself a duplicate of [What methods of ‘clearfix’ can I use?](https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use), which explains that clearfix is a hack that was used 10 years ago and has since been replaced by more modern and practical css solutions, the simplest one being overflow-y: auto. – BenoitLussier Oct 14 '19 at 01:40
  • @BenoitLussier from : https://stackoverflow.com/help/on-topic (see point 1) "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself" , **many** questions are closed for this reason. Taking 5 minutes to include the code **in the question** is the easiest way to ensure the OP gets help. – Jon P Oct 14 '19 at 02:51
  • @Jon P Maybe I see something you don't, because the code was there. Your link explains "How to create a Minimal, Reproducible Example", which is exactly what we have here. The minimal, reproducible example provided has allowed me to provide help before you even started commenting. – BenoitLussier Oct 14 '19 at 03:00
  • @BenoitLussier regarding my chosen dupe, I chose that as it explains what is happening for the OP in a question that actually resembles the original question. It contains more background information to the issue it hand. Blindly adjusting overflow can produce it's own issues (https://css-tricks.com/all-about-floats/#article-header-id-4) – Jon P Oct 14 '19 at 03:04
  • @BenoitLussier why make people go off site? CodePen is not *in the question itself* . If CodePen goes of line for whatever reason, critical information is not available. 3rd party sites for demo are fine, as long as all information required to answer the question is available **in the question itself**. In this example, without going to CodePen I would have no idea that there were floats involved. This is not a matter of opinion, it is actually one of the StackOverflow reasons for closing an answer as off topic. – Jon P Oct 14 '19 at 03:08
  • @Jon P My goal wasn't to start an argument so this will be my last comment. You're trying to raise issues that do not exist. If the OP knew that floats were the cause of the problem, there would have been no need to ask the question in the first place. Also, clearfix should only be used only as a very last resort; your link has comments from 2008 saying that overflow is better. Even your link from css-tricks mentions issues with it, and not with overflow-y like you say it does. Finally, feel free to flag the question as off-topic because of codepen, most questions on this site are like this. – BenoitLussier Oct 14 '19 at 03:21
  • @BenoitLussier you do realize that `overflow(-y):auto` is still a [clearfix solution don't you?](https://learnlayout.com/clearfix.html) . The OP has floats, the parent is collapsing, some kind of clearfix needs to be applied (possibly `overflow:auto`) . The duplicate I have linked to are appropriate. I am glad your answer has helped the OP. I also hope they have taken the time to look at the possible duplicates to get more context to the underlying cause. – Jon P Oct 14 '19 at 04:58

1 Answers1

1

Your #content section has 50% width but 0 height, which is why the background doesn't show.

Add overflow-y: auto to #content and it will adjust the height to its content.

BenoitLussier
  • 194
  • 2
  • 10