1290 1290 - 3 years ago 58
CSS Question

Why is link is being displayed on the next line instead of the same?

I have this html below:



body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
}

.primary {
padding-top: 20px;
}

.upcoming-events {
border: 1px solid #E7EAEC;
background-color: #FFF;
width: 100%;
position: relative;
}

.upcoming-events-header {
border-bottom: 1px solid #E7EAEC;
padding: 20px 10px;
color: #2F343B;
}

.upcoming-events-header-text {
display: block;
}

.upcoming-count {
font-weight: 700;
}

.event {
position: relative;
padding: 10px;
display: block;
}

.event-date-container {
height: 65px;
border-right: 1px solid #CFD4D9;
display: table-cell;
vertical-align: middle;
width: 65px;
}

.day-label {
width: 100%;
color: #00A1A1;
text-transform: uppercase;
display: block;
font-family: 'Interstate', 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-Serif';
letter-spacing: -0.2px;
font-size: 20px;
text-align: center;
font-weight: 700;
}

.date-label {
text-align: center;
font-size: 11px;
display: block;
letter-spacing: -0.1px;
color: #87909A;
width: 100%;
text-transform: uppercase;
margin-top: 2px;
line-height: 14px;
font-weight: 500;
}

.event-info-container {

}

a {
color: #085F99;
text-decoration: none;
cursor: pointer;
}

<section class="primary">
<div class="upcoming-events">
<div class="upcoming-events-header">
<div class="upcoming-events-header-text">
<span class="upcoming-count">95</span>
Games
</div>
</div>
<div class="upcoming-events-body">
<div class="event">
<div class="event-date-container">
<span class="day-label">FRI</span>
<span class="date-label">July 25</span>
</div>
<div class="event-info-container">
<a>Pittsburgh Pirates</a>
</div>
</div>
</div>
</div>
</section>





The problem is the
Pittsburgh Pirates
link is not appearing to the right but at the bottom as shown in the picture below:

enter image description here

Can someone tell me how to move the
Pittsburgh Pirates
to the right (basically right after that vertical border)?

Answer Source

Because you didn't make your .event-info-container a table-cell, like event-date-container before it.

Use this CSS for it to get the desired display::

.event-info-container {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
};

body {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, "Lucida Grande", sans-serif;
}

.primary {
  padding-top: 20px;
}

.upcoming-events {
  border: 1px solid #E7EAEC;
  background-color: #FFF;
  width: 100%;
  position: relative;
}

.upcoming-events-header {
  border-bottom: 1px solid #E7EAEC;
  padding: 20px 10px;
  color: #2F343B;
}

.upcoming-events-header-text {
  display: block;
}

.upcoming-count {
  font-weight: 700;
}

.event {
  position: relative;
  padding: 10px;
  display: block;
}

.event-date-container {
  height: 65px;
  border-right: 1px solid #CFD4D9;
  display: table-cell;
  vertical-align: middle;
  width: 65px;
}

.day-label {
  width: 100%;
  color: #00A1A1;
  text-transform: uppercase;
  display: block;
  font-family: 'Interstate', 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-Serif';
  letter-spacing: -0.2px;
  font-size: 20px;
  text-align: center;
  font-weight: 700;
}

.date-label {
  text-align: center;
  font-size: 11px;
  display: block;
  letter-spacing: -0.1px;
  color: #87909A;
  width: 100%;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 14px;
  font-weight: 500;
}

.event-info-container {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
}

a {
  color: #085F99;
  text-decoration: none;
  cursor: pointer;
}
<section class="primary">
  <div class="upcoming-events">
    <div class="upcoming-events-header">
      <div class="upcoming-events-header-text">
        <span class="upcoming-count">95</span> Games
      </div>
    </div>
    <div class="upcoming-events-body">
      <div class="event">
        <div class="event-date-container">
          <span class="day-label">FRI</span>
          <span class="date-label">July 25</span>
        </div>
        <div class="event-info-container">
          <a>Pittsburgh Pirates</a>
        </div>
      </div>
    </div>
  </div>
</section>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download