CODEWITHSUNDEEP
htmlcss
Rivers87
Rivers87

Reputation: 1

How to align buttons side by side in groups of three, best way?

Hello I am trying to maintain our website careers page and I know just enough to be dangerous and keep it updated, but I am needing help with how to align all these job listings next to each other in stacked groups of three. It was like this before but it got deleted so I have no reference, thanks.

What I have: 1

What I want: What I want

<div>
            <a href="/careers/job_listing_4"><div class="content-tile">
            <p>Psychologist</p>
            <img src="/images/careers/location_pointer.png"/><p>Rock</p>
                </div></a>
    </div>
    <div>
            <a href="/careers/job_listing_1"><div class="content-tile">
            <p>Psychiatric Nurse Practitioner</p>
            <img src="/images/careers/location_pointer.png"/><p>Craw</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_2"><div class="content-tile">
            <p>Licensed Clinical Social Worker</p>
            <img src="/images/careers/location_pointer.png"/><p>Crawf</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_3"><div class="content-tile">
            <p>Licensed Clinical Social Worker</p>
            <img src="/images/careers/location_pointer.png"/><p>Cay</p>
      </div></a>
    </div>
     <div>
        <a href="/careers/job_listing_5"><div class="content-tile">
            <p>Dental Assistant</p>
            <img src="/images/careers/location_pointer.png"/><p>Cay</p>
      </div></a>
    </div>
     <div>
        <a href="/careers/job_listing_6"><div class="content-tile">
            <p>Bilingual Medical Receptionist</p>
            <img src="/images/careers/location_pointer.png"/><p>Craw</p>
      </div></a>
    </div>
     <div>
        <a href="/careers/job_listing_7"><div class="content-tile">
            <p>Certified Medical Assistant/Licensed Practical Nurse</p>
            <img src="/images/careers/location_pointer.png"/><p>Ter</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_8.php"><div class="content-tile">
            <p>Dental Office Coordinator</p>
            <img src="/images/careers/location_pointer.png"/><p>Cay</p>
      </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_9"><div class="content-tile">
            <p>Call Center</p>
            <img src="/images/careers/location_pointer.png"/><p>Cli</p>
     </div></a>
    </div>
    <div>
        <a href="/careers/job_listing_10"><div class="content-tile">
            <p>Nurse Practitioner</p>
            <img src="/images/careers/location_pointer.png"/><p>Blo</p>
     </div></a>
    </div>

That's the code, it's pretty basic, it used to be arranged in groups of two or three side by side, depending on how many job listings were posted, but that has been removed and I can't remember what it was.

Upvotes: 0

Views: 89

Answers (5)

IvanS95
IvanS95

Reputation: 5732

You can use either Flexbox or CSS Grid for this particular layout without having to include any frameworks; since you want them to be aligned in both directions (rows and columns) I'd definitely suggest sticking to CSS Grid which is specifically made for those cases.

Using flexbox for the same task is absolutely possible, although requires more work and some clever calculations.

body * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.grid-item {
  border: 1px solid black;
}

.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  border: 1px solid blue;
  min-height: 100px;
  flex: 1 1 30%;
  margin: 5px;
}
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Upvotes: 2

Andrew Robinson
Andrew Robinson

Reputation: 71

I think a simple grid system will help here, flexbox grid is what I have used in the fiddle below:

https://jsfiddle.net/andrwrbnsn/xjt9Lhe7/82/

This essentially lets you set different widths depending on browsers width, these will sit next to each other.

The reason why your blocks don't sit next to eachother are because <div> is a block level element, if you set display: inline-block it will sit next to eachother.

Upvotes: 0

Zafiera Davids
Zafiera Davids

Reputation: 221

Install Bootstrap in your project and use their grid system. Your code will look like this:

<div class="row">
<div class="col-md-4">
     <a href="/careers/job_listing_4"><div class="content-tile">
     <p>Psychologist</p>
     <img src="/images/careers/location_pointer.png"/><p>Rock</p></a>
</div>
<div class="col-md-4">
     <a href="/careers/job_listing_1"><div class="content-tile">
     <p>Psychiatric Nurse Practitioner</p>
     <img src="/images/careers/location_pointer.png"/><p>Craw</p></a>
</div>
<div class="col-md-4">
     <a href="/careers/job_listing_2"><div class="content-tile">
     <p>Licensed Clinical Social Worker</p>
     <img src="/images/careers/location_pointer.png"/><p>Crawf</p></a>
</div>
</div>

Now, Bootstrap will handle the responsiveness for you.

Upvotes: 0

Shoaib
Shoaib

Reputation: 314

please try this 

<style>
.makeInline {
display: inline-block;
width: calc( 25% - 5px );
border: 1px solid red;
margin-bottom: 5px;
vertical-align: top;
}
</style>
<div class="makeInline">
<a href="/careers/job_listing_4">
<div class="content-tile">
<p>Psychologist</p>
<img src="/images/careers/location_pointer.png"/>
<p>Rock</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_1">
<div class="content-tile">
<p>Psychiatric Nurse Practitioner</p>
<img src="/images/careers/location_pointer.png"/>
<p>Craw</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_2">
<div class="content-tile">
<p>Licensed Clinical Social Worker</p>
<img src="/images/careers/location_pointer.png"/>
<p>Crawf</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_3">
<div class="content-tile">
<p>Licensed Clinical Social Worker</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cay</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_5">
<div class="content-tile">
<p>Dental Assistant</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cay</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_6">
<div class="content-tile">
<p>Bilingual Medical Receptionist</p>
<img src="/images/careers/location_pointer.png"/>
<p>Craw</p>
</div>
</a>
</div>
<div class="makeInline">
<a href="/careers/job_listing_7">
<div class="content-tile">
<p>Certified Medical Assistant/Licensed Practical Nurse</p>
<img src="/images/careers/location_pointer.png"/>
<p>Ter</p>
</div>
</a> </div>
<div class="makeInline"> <a href="/careers/job_listing_8.php">
<div class="content-tile">
<p>Dental Office Coordinator</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cay</p>
</div>
</a> </div>
<div class="makeInline"> <a href="/careers/job_listing_9">
<div class="content-tile">
<p>Call Center</p>
<img src="/images/careers/location_pointer.png"/>
<p>Cli</p>
</div>
</a> </div>
<div class="makeInline"> <a href="/careers/job_listing_10">
<div class="content-tile">
<p>Nurse Practitioner</p>
<img src="/images/careers/location_pointer.png"/>
<p>Blo</p>
</div>
</a> </div>

Upvotes: 0

EnigmaTaco
EnigmaTaco

Reputation: 13

One approach is to use grid. Here, I have a grid which will have three rows of equal size, and automatically makes columns as needed depending on how many grid elements I have. Obviously, you can change the grid properties to fit your own needs :)

  .grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: column;
  }
  .grid-element {
    width: 4rem;
    height: 2rem;
    margin: 0.2rem;
    background: #ccc;
  }
<div class="grid">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
 </div>

Upvotes: 0

Related Questions