Aligning Boxes next to each other responsively

user_10205546 0
Viewed 64

I would like to align boxes and arrows all nice & straight. I have tried to play with padding and such but it does not seem to function well.

HTML:

<div class="listBox">
  <p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
</div>
<img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
  <p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
</div>
  <img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
  <p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
</div>

CSS:

.listBox{
  background-color: rgba(245, 246, 250, 0.7);
  border-radius: 15px;
  display: inline-block;
  width: 25%;
  margin-right: -4px;
  z-index: -1;
  padding: 8px;
}

.listBox p{
  font-size: 11px;
  font-family: Courier;
}

This is what happens.

css html
4 Answers

Flexbox may make this work better.

Set your container element to display: flex, and remove width: 25% and display: inline-block from .listBox. You may want to consider adding flex-grow: 1; and flex-basis: 0; to .listBox to make them the same width.

CSS:

.listContainer {
    display: flex;
}
.listBox{
    background-color: rgba(245, 246, 250, 0.7);
    border-radius: 15px;
    z-index: -1;
    padding: 8px;
    flex-grow: 1;
    flex-basis: 0;
}
.listBox p{
    font-size: 11px;
    font-family: Courier;
}

HTML:

<div class="listContainer">
    <div class="listBox">
        <p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
    </div>
    <img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
    <div class="listBox">
        <p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
    </div>
    <img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
    <div class="listBox">
        <p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
    </div>
</div>
user_14275630

Just quick and dirty, didn't adjust the widths and such, hence the broken texts. Look at the styles in the body {}. This solution uses flexbox, feel free to take a look into it.

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.listBox{
  background-color: rgba(245, 246, 250, 0.7);
  border-radius: 15px;
  display: inline-block;
  width: 25%;
  margin-right: -4px;
  z-index: -1;
  padding: 8px;
}

.listBox p{
  font-size: 11px;
  font-family: Courier;
}

img {
  padding: 0 40px;
}
<body>
  <div class="listBox">
    <p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
  </div>
  <img src="https://via.placeholder.com/40x40">
  <div class="listBox">
    <p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
  </div>
    <img src="https://via.placeholder.com/40x40">
  <div class="listBox">
    <p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
  </div>
</body>

user_67019030

You can go with CSS flex in this case. In the example I changed your images with <div class="spacer"> but you can go with images as well (give them the class spacer)

/* new */
.list {
   width: 100%;
   display: flex;
   justify-content: space-between;
   background-color: #579C81;
}

.list .spacer {
   margin: 0 10px;
   max-width: 10%;
   align-self: center;
}

.listBox{
    background-color: rgba(245, 246, 250, 0.7);
    border-radius: 15px;
    width: 25%;
    padding: 8px;

    /* changed */
    display: flex;

    /* new */        
    flex: 1 auto;
  }

  .listBox p {
      font-size: 11px;
      font-family: Courier;

      /* new */
      flex: 1 0 auto;
      word-break: break-all;
      max-width: 100%;
  }
 
<!-- added new wrapper div -->
<div class="list">
  <div class="listBox">
     <p>Course ID: COMP108<br/>Course Name: 
       Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
  </div>
  <div class="spacer"> >> </div>
  <div class="listBox">
    <p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
  </div>
  <div class="spacer"> >> </div>
  <div class="listBox">
    <p>Course ID: COMP248<br/>Course Name: Object- 
   Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
  </div>
</div>

user_102905570

You can do something like that:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.listBox{
  width: 100%;
}

.listBox:after{
  content: '';
  display: table;
  clear: both;
}

.listBox li {
  position: relative;
  float: left;
  width: 33.3333%;
  list-style: none;
  padding: 8px 16px;
}

.listBox li div {
  background-color: #999;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
}

.listBox p{
  padding: 8px;
  font-size: 11px;
  font-family: Courier;
}

i {
  position: absolute;
  right: -14px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<ul class="listBox">

  <li><div><p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
    <i class="fas fa-arrow-right fa-2x"></i></div></li>

  <li><div><p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p><i class="fas fa-arrow-right fa-2x"></i></div></li>

  <li><div><p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p></div></li>

</ul>

To position and center the arrow use position: absolute and right will be equal to zero minus half of the width of the arrow image.

See the example here https://jsfiddle.net/ogpunjb6/24/

user_94901690
Related