0

I've got an events page with a navy background color applied to my header divs. However all the following event divs are also appearing in navy. I can't find the issue in Inspector and can't replicate the problem when I try it in jsfiddle.

<style>
.event-list-header {
    background-color: #2e3a62;
    color: #fff;
    padding: 5px 10px;
}
        
.event-list-header h2{margin:0;padding:0;font-size:18px;}
</style>

<div class="event-list-header"><h2>Monday, October 12, 2020</h2></div>
<div class="event">
  <div class="event-list-date col-md-3"><strong>Oct 12</strong></div>
  <div class="event-content col-md-9">...</div>
  <div class="eventimespan">10 a.m. - 11 a.m.</div>
</div>

working jsfiddle: https://jsfiddle.net/opera13/1nwbLqex/

Can anyone tell me where I've gone astray?

Thank you.

Kristi Simonson
  • 515
  • 1
  • 6
  • 22
  • I can't seem to reproduce that on MS Edge Version 85.0.564.70 (Official build) (64-bit) and macOS Catalina 10.15.7. The provided website shows the problem, but the JSFiddle and provided code don't seem to have it. – shreyasm-dev Oct 10 '20 at 17:03
  • Looks like it was caused by the floats coming in from the Bootstrap stylesheet. Both answers were helpful. Thank you folks. – Kristi Simonson Oct 10 '20 at 18:08

2 Answers2

2

Add overflow: auto; to .event. It has a height of zero because it only contains floated elements. Adding overflow: auto; to the parent of the floated elements helps to avoid that.

Johannes
  • 64,305
  • 18
  • 73
  • 130
1

add to your css display:inline-block; and width:100%;.event-list-header { background-color: #2e3a62; color: #fff; padding: 5px 10px; display:inline-block; width:100%; }

godfather
  • 1,518
  • 2
  • 10
  • 17