Flo Woo Flo Woo - 4 months ago 8
HTML Question

trying to align two divs beside each other and failing

In my code below, I would like the div with class

card-columns
to be inline/adjacent with the div having class
card-custom
.

I think what I'm trying is easy but I can't find the correct combination of display and floats to get it working.

I tried making the parent div a flex with
display: flex
hoping it would just work. But while it make it alongside it messed up the sizing of the first div.

Can someone help tell me what i'm doing wrong please?

I have a codepen example here http://codepen.io/anon/pen/grxRza



.maxWidth {
width: 100%;
max-width: 1370px;
margin: 60px auto;
padding: 0 20px;
}

.card-columns {
column-count: 5;
}
.intermission {
color: blue;
column-span: all;
border: 2px solid;
}

.card-custom {
border: 1px solid blue;
width: 430px;
height: 220px;

}


<!-- intermission column span full -->
<div class="intermission">

<div class="card-custom">
</div>

<div class="card-columns">

<div class="card">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>


<div class="card">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>

<div class="card">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>

</div><!-- end intermission card-columns -->
</div><!-- end intermission div-->





Answer

You were on the right track.

Add display: flex to the parent div:

.intermission {
  display: flex;   /* NEW */
  color: blue;
  border: 2px solid;
}

The first div will shrink for two reasons:

  • An initial setting of a flex container is flex-shrink: 1. This means that flex items are allowed to shrink (preventing them from overflowing the container).
  • Another initial setting of a flex container is flex-wrap: nowrap. This means flex items are confined to a single line, allowing flex-shrink: 1 to work.

Add flex-shrink: 0 to the first div to disable the shrinking feature.

For more details, see "The flex-shrink factor" section in this answer: http://stackoverflow.com/a/34355447/3597276

Revised Codepen

.intermission {
  display: flex;
  color: blue;
  border: 2px solid;
}
.card-columns {
  column-count: 5;
}
.card-custom {
  border: 1px solid blue;
  width: 430px;
  height: 220px;
  flex-shrink: 0; /* NEW */
}
<link href="http://afkweb.com/etc/bootstrap-4-alpha/bootstrap.css" rel="stylesheet"/>
<div class="intermission">
  <div class="card-custom"></div>
  <div class="card-columns">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>