Aligning Boxes next to each other responsively

flexbox
css float
flex; align right
align-items center not working
flexbox align individual item
justify-content align-content
flex; align left and right
row align-items-center

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


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>

How to place two divs next to each other in HTML?, How do you put boxes next to each other in CSS? The alignment subjects are baseline aligned against each other by adding padding inside the boxes. Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using justify-self or align-self , or when setting these values as a group with justify-items and align-items .


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>

Responsive Two Column Layout, property float to achieve this. With that, add height:100px and set margin. Arrange objects equal distances from each other Select at least three objects that you want to arrange equal distances from each other. To select multiple objects, click the first object, and then press and hold Ctrl while you click the other objects.


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>

How To Align Things In CSS, box-sizing: border-box; } ​ /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 10px; height: 300px; /* Should  Two Divs next to each other, that then stack with responsive change. Asked 7 years ago. Active 2 months ago. Viewed 156k times. I'm trying to achieve something that I am sure should be easier than I am making it! I am using the Skeleton responsive framework, and have been fine up until now. Here is a diagram of what I want to achieve.


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>

Everything You Need To Know About Alignment In Flexbox , In this article, I will take a look at the different alignment methods. ways to align boxes in CSS (as we will look at in the next section), we don't  Optionally, you could add media queries to make the images stack on top of each other instead of floating next to each other, on a specific screen width. The following example will stack the images vertically on screens that are 500px wide or less: Responsive Example. /* Responsive layout - makes the three columns stack on top of each other


Having 2 divs next to each other, We can do other things with that space. A newer value of justify-content can be found in the Box Alignment specification; it doesn't appear in the Flexbox spec. you add a height or block-size to the flex container as in this next demo. Performance · Photoshop · Plugins · React · Responsive Web Design  Aligning Objects to Each Other. To align objects to each other, all you need to do is select multiple objects at a time. To select multiple objects: Click on object or image, and hold down the Ctrl key on your keyboard. While holding down Ctrl, use your cursor to click on each additional object you want to select. Then you can go on to align objects relative to each other.


CSS Box Alignment, I am having some difficulty trying to get my two text boxes to be next to each other​. I just want them centered on the page next to each other, like this towards the Use display:inline-block and text-align:center on the parent. Is it possible to have the two paragraphs and blue background be responsive. Try the other values and see how all of the items align against each other in the flex container. Aligning one item with align-self The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item.


Flex · Bootstrap, The CSS Box Alignment module specifies CSS features that relate to the aligned against each other by adding padding inside the boxes. 3 horizontal boxes aligned with css. if all you are trying to do is have the boxes NEXT to each other you can simply do:.box{float:left;}/* float:right would also work, but the boxes would be