Background color in div element not showing

Question

I'm taking this course called HTML, CSS, and Javascript for Web Developers. I'm in the lecture that talks about floating elements, my problem is that when I add the properties "float" and "margin-right" to the element p selector, the background of the div disappears. Can somebody help me, please?

div {
  background-color: blue;
}

p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

#p1 {
  background-color: #A52A2A;
}

#p2 {
  background-color: #DEB887;
}

#p3 {
  background-color: #5F9EA0;
}

#p4 {
  background-color: #FF7F50;
}

section {
  clear: left;
}

<div>
  <p id="p1"></p>
  <p id="p2"></p>
  <p id="p3"></p>
  <p id="p4"></p>
</div>
<section>This is regular content continuing after the paragraph boxes</section>

If you also float the div left, then you should see the result you're after — Craig, Apr 14 '21 at 01:02
Does this answer your question? [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) and [What methods of ‘clearfix’ can I use?](https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use) — showdev, Apr 14 '21 at 01:07

Manas Khandelwal · Accepted Answer · 2021-04-14T01:19:55.707

1

Because you are using float you need to clear it because it gets removed from the document flow. This process of clearing is also called Clearfix.

You can do something like this:

div:after {
  content: "";
  display: table;
  clear: both;
}

div {
  background-color: blue;
}

div:after {
  content: "";
  display: table;
  clear: both;
}

p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

#p1 {
  background-color: #A52A2A;
}

#p2 {
  background-color: #DEB887;
}

#p3 {
  background-color: #5F9EA0;
}

#p4 {
  background-color: #FF7F50;
}

section {
  clear: both;
}

<div>
  <p id="p1"></p>
  <p id="p2"></p>
  <p id="p3"></p>
  <p id="p4"></p>
</div>
<section>This is regular content continuing after the paragraph boxes</section>

You should not use floats now. Use modern technologies like flexbox and grid.

Some useful resources:

edited Apr 14 '21 at 01:19

answered Apr 14 '21 at 01:02

Manas Khandelwal

3,790
2
11
24

Thank you so much!! It seemed to have solved the problem. And I'll check up the links, guess the course I'm taking is a bit outdated... You're so nice, thank you again :3 – Lunazul8 Apr 14 '21 at 01:15
@Lunazul8 Its not important to read all those links . . .They are just for reference. . . can you share the URL of the course so I can check! – Manas Khandelwal Apr 14 '21 at 01:18
But the first link solved my problem, I added the property overflow: auto; to div and it worked :3... Here's the link of the course: https://www.coursera.org/learn/html-css-javascript-for-web-developers/lecture/Tj19u/lecture-21-positioning-elements-by-floating – Lunazul8 Apr 14 '21 at 01:22
@Lunazul8 That's seems too old to me. . . You should prefer better once's, do you want a premium course or a free one! – Manas Khandelwal Apr 14 '21 at 01:27
I can't afford a premium one so a free one is the better option for me – Lunazul8 Apr 14 '21 at 01:32
@Lunazul8 This is far better than that one: https://www.youtube.com/watch?v=mU6anWqZJcc – Manas Khandelwal Apr 14 '21 at 01:39
Most people use VS Code now. . . it has a lot of features . . . and made by Microsoft . . . If you want help in setting up the editor let me know. . . You can download it from here: https://code.visualstudio.com/Download – Manas Khandelwal Apr 14 '21 at 01:45

score 0 · Answer 2 · answered Apr 14 '21 at 01:02

0

The float attribute remove element from the document flow. As the div that contains p floating elements and this not have a setted height, the height pass to 0. Set a height for the div.

answered Apr 14 '21 at 01:02

Ignacior

897
2
15

When I set any height for the background, the content of the section element, gets on top of the background, dividing it :c – Lunazul8 Apr 14 '21 at 01:12

score 0 · Answer 3 · answered Apr 14 '21 at 01:08

0

The float properties acts like a position:absolute would

Even if the <p> is in the <div>, this property makes it "pop out" of the <div>, removing its automatic height and width, thus , making the <div> 0px height, and 0px witdh, in such a way you can't see it

A way to fix it is setting a height and witdh to your <div>

answered Apr 14 '21 at 01:08

Dizio Adil

53
5

I tried that, but then the section element gets in between, dividing the backgound :c... Thank you anyway – Lunazul8 Apr 14 '21 at 01:17

Background color in div element not showing

3 Answers3