Force two cards to be on the same line

Question

I've been working on a website. (Resize the output to get the effect)

.header {
  text-align: center;
  color: #ffffff;
  font-family: Trebuchet MS;
}

body {
  background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;
}

.img {
  text-align: center;
  width: 50%;
  height: 50%;
}

a:link {
  text-decoration: none;
  color: #0645AD;
}

a:visited {
  text-decoration: none;
  color: #0645AD;
}

a:active {
  text-decoration: none;
  color: #0B0080;
}

a:hover {
  text-decoration: none;
  color: #0B0080;
}

.cardPlain {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  width: 70%;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  width=70%;
  margin: auto;
}

.control-width {
  width: 70%;
  margin: auto;
}

.card,
.control-width.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  margin: auto;
  width: 100%;
}

<h1>&nbsp</h1>
<div class="control-width">
  <a href="bio.html">
    <div class="card">
      <p>&nbsp</p>
      <p style="text-align: center;"><img src="rappaticFull.jpg" alt="I haven't uploaded the image :-)"></p>
      <div class="container" style="text-align:center">
        <h2 class="header">Hi, I'm rappatic.</h2>
        <p class="header">I code when I feel like it.</p>
        <p>&nbsp</p>
      </div>
    </div>
  </a>
</div>

<h1>&nbsp</h1>

<div class="cardPlain">
  <div class="container" style="text-align:center">
    <h3 class="header">My Stuff</h3>
    <p class="header"><a href="https://stackexchange.com/users/7808413/pagie" target="_blank">&nbspStack Exchange</a></p>
    <p class="header"><a href="downloads.html">Downloads</a></p>
    <p class="header"><a href="https://github.com/rappatic" target="_blank">Github</a></p>
    <p class="header"><a href="https://twitter.com/rappatic_" target="_blank">Twitter</a>&nbsp|&nbsp<a href="https://huggle.jdf2.org/hug/rappatic/" target="_blank">Huggles</a></p>
  </div>
</div>

<div class="cardPlain">
  <div class="container" style="text-align:center">
    <h3 class="header">Foo</h3>
    <p>bar</p>
    <p>Some content</p>

So the idea is to force the Downloads div to display on the same line as the placeholder (foo), like this:

Everything I've tried (this, this, this and this) doesn't actually work. When I try to do the display: inline-block thing it just forces the two divs over to the left.

What can I do to make the two divs appear on the same line?

Not sure if this makes a diff but you have a typo on `.container{...}` - you have `width=70%;` when the equals sign should be a colon — blurfus, Dec 05 '17 at 21:47
Can we see your `inline-block` attempt? Keep in mind that they will not fit on one line if they are both set to `width:70%` (70+70>100). Also keep in mind that white space between the two elements will be displayed and will add to the widths, so if the two widths add up to exactly 100%, you'll need to eliminate white space between them. — showdev, Dec 05 '17 at 21:49
Also, `.cardPlain` has a width of 70% of your screen... which basically means two of them will not fit in one screen side-by-side — blurfus, Dec 05 '17 at 21:50
If we aren't addressing a specific coding issue, this concept has most assuredly been discussed elsewhere (Possible duplicate of [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side)). — showdev, Dec 05 '17 at 22:01
Possible duplicate of [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) — blurfus, Dec 05 '17 at 23:49

score 1 · Accepted Answer · answered Dec 05 '17 at 21:55

Wrap your cardPlain divs in a parent div something like this and style the parent div with display: flex. This will align them horizontally, but you need to adjust the heights of each containers to match heights.

FLEX for more on flexbox tricks.

<div style="display: flex">
  <div class="cardPlain">
  </div>
  <div class="cardPlain">
  </div>
<div>

.header {
  text-align: center;
  color: #ffffff;
  font-family: Trebuchet MS;
}

body {
  background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;
}

.img {
  text-align: center;
  width: 50%;
  height: 50%;
}

a:link {
  text-decoration: none;
  color: #0645AD;
}

a:visited {
  text-decoration: none;
  color: #0645AD;
}

a:active {
  text-decoration: none;
  color: #0B0080;
}

a:hover {
  text-decoration: none;
  color: #0B0080;
}

.cardPlain {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  width: 70%;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  width=70%;
  margin: auto;
}

.control-width {
  width: 70%;
  margin: auto;
}

.card,
.control-width.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  margin: auto;
  width: 100%;
}

<h1>&nbsp</h1>
<div class="control-width">
  <a href="bio.html">
    <div class="card">
      <p>&nbsp</p>
      <p style="text-align: center;"><img src="rappaticFull.jpg" alt="I haven't uploaded the image :-)"></p>
      <div class="container" style="text-align:center">
        <h2 class="header">Hi, I'm rappatic.</h2>
        <p class="header">I code when I feel like it.</p>
        <p>&nbsp</p>
      </div>
    </div>
  </a>
</div>

<h1>&nbsp</h1>

<div style="display: flex;">
  <div class="cardPlain">
    <div class="container" style="text-align:center">
      <h3 class="header">My Stuff</h3>
      <p class="header"><a href="https://stackexchange.com/users/7808413/pagie" target="_blank">&nbspStack Exchange</a></p>
      <p class="header"><a href="downloads.html">Downloads</a></p>
      <p class="header"><a href="https://github.com/rappatic" target="_blank">Github</a></p>
      <p class="header"><a href="https://twitter.com/rappatic_" target="_blank">Twitter</a>&nbsp|&nbsp<a href="https://huggle.jdf2.org/hug/rappatic/" target="_blank">Huggles</a></p>
    </div>
  </div>

  <div class="cardPlain">
    <div class="container" style="text-align:center">
      <h3 class="header">Foo</h3>
      <p>bar</p>
      <p>Some content</p>
    </div>
  </div>
</div>

Force two cards to be on the same line

1 Answers1