0

So I want to have a background colour for each of my div sections to separate them but it's not showing up, I tried putting the background colour in the html code and the css code but it didn't work for either so how can I fix this problem? Here is what it looks like: enter image description here Here is my html code:

#background1 {
  background-color: #c5c5c5;
}
#box {
  margin-top: 10%;
  padding: 20;
  height: 200px;
  width: 300px;
  background-color: #f2f2f2;
  text-align: right;
  float: right;
}

.left {
  margin-top: 10%;
  padding: 20;
  width: 50%;
  display: block;
  float: left;
}

.right {
  padding: 20;
  width: 50%;
  display: block;
  float: right;
}
<section style="background-color: #c5c5c5;" >
  <div id="background1" style="background-color: #c5c5c5; margin:1%">
  <div class="left"  >
    <h1 >About us</h1>
    <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed 
  cursus ante dapibus diam. Sed nisi. 
  Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus 
  sed augue semper porta. Mauris massa.
   Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia 
  nostra, per inceptos himenaeos. </p></div>
  <div class="right"id="box" ></div>
  </div>
</section>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Lucy Abbott
  • 7
  • 3
  • 1
    I think because you are floating some elements. Then the parent element element of the float doesn't have any "content" and therefore has a height of 0, so it can't be seen. Apply the background to your floated elements. – bcr666 Feb 04 '21 at 12:11
  • check whether your your css file and also you are adding background color to section and also for div add color to either section or div – Dinesh s Feb 04 '21 at 12:12

0 Answers0