CSS div没有正确定位

Question

I am trying to build a event section in my website. when I put several events in it div position is not proper. HTML

<div class="col-sm-5 round-body" id="events">
            <h1>Events</h1>
              <div class="event-list">
                <div class="event-date">
                  <div class="event-month">May</div>
                  <div class="event-day">06</div>
                </div>
                <div class="event-text">
                  <p><strong>Blah blah blah Work</strong></p>
                </div>
              </div>
              <div class="event-list">
                <div class="event-date">
                  <div class="event-month">May</div>
                  <div class="event-day">10-23</div>
                </div>
                <div class="event-text">
                  <p><strong>Blah blah blah</strong></p>
                </div>
              </div>
              <div class="event-list">
                <div class="event-date">
                  <div class="event-month">May</div>
                  <div class="event-day">06</div>
                </div>
                <div class="event-text">
                  <p><strong>Blah blah blah Work</strong></p>
                </div>
              </div>
          </div>

CSS

.event-list .event-date{
  padding: 15px 15px 15px 15px;
  background-color: #109902;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin-right: 15px;
  width: 80px;
}
.event-list, .event-month, .event-day{
  width: 100%;
}
.event-date{
  float: left;
  padding-left: 15px;
}

jsfiddle link is given below https://jsfiddle.net/u1pucb15/5/

Answer 1

Please Use display: inline-block for event-date div

 .event-list .event-date{ padding: 15px 15px 15px 15px; background-color: #109902; color: #fff; font-size: 16px; text-align: center; font-weight: bold; margin-right: 15px; width: 80px; } .event-list, .event-month, .event-day{ width: 100%; } .event-list{ margin-bottom: 10px; } .event-date{ display: inline-block; padding-left: 15px; } .event-text { display: inline-block; vertical-align: top; } 

 <div class="col-sm-5 round-body" id="events"> <h1>Events</h1> <div class="event-list"> <div class="event-date"> <div class="event-month">May</div> <div class="event-day">06</div> </div> <div class="event-text"> <p><strong>Blah blah blah Work</strong></p> </div> </div> <div class="event-list"> <div class="event-date"> <div class="event-month">May</div> <div class="event-day">10-23</div> </div> <div class="event-text"> <p><strong>Blah blah blah</strong></p> </div> </div> <div class="event-list"> <div class="event-date"> <div class="event-month">May</div> <div class="event-day">06</div> </div> <div class="event-text"> <p><strong>Blah blah blah Work</strong></p> </div> </div> </div> 

Answer 2

Give float: left; to .event-text

.event-text {
    float: left;
}

And clear: left; to .event-list

Working Fiddle

Answer 3

try this one:

.event-list .event-date{
    padding: 15px 15px 15px 15px;
    background-color: #109902;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    margin-right: 15px;
    width: 80px;
  margin-bottom:5px;
}
.event-list, .event-month, .event-day{
    width: 100%;
}
.event-date{
    float: left;
    padding-left: 15px;
}


.event-text {
    float: left;
}

.event-list {
    clear: left;
}

DEMO HERE

Answer 4

This may not be what you want, but something closer like this?

.event-list .event-date{
    padding: 15px 15px 15px 15px;
    background-color: #109902;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    margin-right: 15px;
    width: 80px;
}
.event-list{
  display:inline-block;
}
.event-month, .event-day{
    width: 100%;
}


.event-date{
    padding-left: 15px;
}