Nitro Nitro -4 years ago 73
CSS Question

Trying to get divs of information in a row

I am trying to align all of these as sort of "columns" in the middle of my page. You can see what I am talking about here

I want all of the headings to be in a line, and also have their descriptions right under them. How would I do this..?

This is my HTML

div class="departments-section">
<div class="blaine-sheriff">
<h3><b>Blaine County Sheriff's Office</b></h3>
<p>The mission of the Blaine County Sheriff is to protect and to serve Paleto Bay, Sandy Shores, surrounding areas. Only the best of the best are promoted.</p>
</div>
<div class="blaine-fire">
<h3><b>Blaine County Fire</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="san-swat">
<h3><b>San Andreas SWAT Team</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>


CSS:

.departments-section {
border-top: 1px solid white;
border-bottom: 1px solid white;
margin-top: 40px;
text-align: center;
width: 100%;
width: auto;
background-color: #171717;
margin-bottom: 250px;
}

.department-names h3 {
color: white;
display: inline;
margin-top: 25px;
padding: 35px 25px;
}

.blaine-sheriff {
width: 15%;
margin-left: auto;
margin-right: auto;
}

.blaine-fire {
width: 15%;
margin-left: auto;
margin-right: auto;
}

.blaine-sheriff {
width: 15%;
margin-left: auto;
margin-right: auto;
}

.blaine-sheriff p {
color: white;
}

Answer Source

Something like this?

use display:flex in the parent container to center child items:

  display: flex;
  align-items: center;
  justify-content: center;

the same CSS applied to all 3 section:

calculate width with: width: calc(100% / 3); so each take 1/3 of 100%.

align-self: flex-start; so item are aligned to the top.

.blaine-sheriff,
.blaine-fire,
.san-swat {
  color: white;
  width: calc(100% / 3);
  margin: 0;
  padding: 15px;
  align-self: flex-start;
}

.departments-section {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  margin-top: 40px;
  width: 100%;
  background-color: #171717;
  margin-bottom: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blaine-sheriff,
.blaine-fire,
.san-swat {
  color: white;
  width: calc(100% / 3);
  margin: 0;
  padding: 15px;
  align-self: flex-start;
}
<div class="departments-section">
  <div class="blaine-sheriff">
    <h3><b>Blaine County Sheriff's Office</b></h3>
    <p>The mission of the Blaine County Sheriff is to protect and to serve Paleto Bay, Sandy Shores, surrounding areas. Only the best of the best are promoted.</p>
  </div>
  <div class="blaine-fire">
    <h3><b>Blaine County Fire</b></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="san-swat">
    <h3><b>San Andreas SWAT Team</b></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

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