trying to align two divs beside each other and failing

Question

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-->

Have you tried using style="display:inline-block;" for your divs? — Gaetan, Jul 07 '16 at 09:09
Have a look at the examples provided here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Tienou, Jul 07 '16 at 09:12

score 1 · Accepted Answer · edited May 23 '17 at 12:33

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: https://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>

score 0 · Answer 2 · answered Jul 07 '16 at 09:25

0

Have you tried float left or right? Make sure the total widths for card-column and card-custom do not exceed the total width size of the div or element containing them. Furthermore bootstrap grid system will help fix this with ease.

answered Jul 07 '16 at 09:25

Tatenda

679
2
10
24

score 0 · Answer 3 · answered Jul 07 '16 at 09:29

0

Just add this to your css

.card-custom{
    float: left;
}

answered Jul 07 '16 at 09:29

Rahul Arora

4,503
1
16
24

trying to align two divs beside each other and failing

3 Answers3