0

I want create a responsive columns using HTML/CSS with float property only and it is working but I'm not able to put the background color in it.

I tried applying a background color in whole section using CSS but it is not getting applied. Is there any way I can add a background color in section not individually in columns?

enter image description here

/*Section with background color - Red*/

.section {
  width: 100%;
  background-color: red;
}


/*Column with 50% width*/

.column {
  width: 50%;
  float: left;
}


/*Media query to make it responsive breakpoint at 800px*/

@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
}
<div class="section">
  <div class="column">
    <h1>Column 1</h1>
    <p>This is Coulmn 1 with 50% width and float left.</p>
  </div>
  <div class="column">
    <h1>Column 2</h1>
    <p>This is Coulmn 2 with 50% width and float left.</p>
  </div>
</div>

I would be very thankful if anybody can help me in this!!

I tried applying a background color in whole section using CSS but it is not getting applied.

Cédric
  • 2,239
  • 3
  • 10
  • 28
Asad
  • 11
  • 2
  • 1
    Like the other already said, you need to either add some kind of "clearfix" or add an `overflow` to your section. But i guess my question to you would be why are you using floats for this? There are mode modern ways of achieving a two column layout, like flex and css grid... – Boguz Oct 25 '22 at 13:42
  • Thank you! That was helpful. Actually you can say that I'm a beginner. – Asad Oct 25 '22 at 18:12

0 Answers0