Force Elements Onto New Line

Question

I am trying to push a div with images underneath a couple of arrow icons, that do not take up a whole row, as seen below. However, the images underneath keep wrapping in between the arrows, which is not the desired result. I was wondering if someone can please advise how to fix this? The example I inserted only works in narrower viewports because I pulled it from my mobile site I am working on. I am confused why two separate divs are overlapping in this way. Thanks in advance.

#photo-viewer-outer-wrap div {
  display: inline;
}

#photo-viewer-inner-wrap-left img {
  max-width: 100%;
}

#photo-viewer-inner-wrap-right {
  display: flex;
  overflow-y: scroll;
  max-height: 300px;
  clear: both;
}

#photo-viewer-inner-wrap-right img {
  max-width: 30%;
}

#left-arrow {
  float: left;
  width: 30px;
  margin-left: 10px;
}

#right-arrow {
  float: right;
  width: 30px;
  margin-right: 10px;
}

<div id="photo-viewer-outer-wrap">
  <div id="photo-viewer-inner-wrap-left">
    <img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
    <img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
    <img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
  </div>
  <div id="photo-viewer-inner-wrap-right">
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
  </div>
</div>

The problem is caused by the `display: inline` on your outer div it seems. See a simplified version without the outer div: https://jsfiddle.net/d9rueyov/39/ — pso, Mar 01 '22 at 05:00

Arman Ebrahimi · Answer 1 · 2022-03-01T07:19:31.303

I used flex for you. No need to float and display: inline:

#photo-viewer-inner-wrap-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#photo-viewer-inner-wrap-left img:first-child {
  width: 100%;
}

#left-arrow {
  width: 30px;
  height: 30px;
  margin: 20px 0 20px 10px;
}

#right-arrow {
  width: 30px;
  height: 30px;
  margin: 20px 10px 20px 0;
}

#photo-viewer-inner-wrap-right {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  max-height: 300px;
}

#photo-viewer-inner-wrap-right img {
  width: 33.33%;
}

<div id="photo-viewer-outer-wrap">
  <div id="photo-viewer-inner-wrap-left">
    <img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" />
    <img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
    <img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
  </div>
  <div id="photo-viewer-inner-wrap-right">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
  </div>
</div>

Shahil Mishra · Accepted Answer · 2022-03-03T05:32:46.690

you are using display inline property in a div which force div to take as much as space it needs and allows another div to join it. check these for learning display properties link2

check this also

#photo-viewer-outer-wrap div {
  display: block;
}

#photo-viewer-inner-wrap-left img {
  max-width: 100%;
}

#photo-viewer-inner-wrap-right {
  display: flex;
  overflow-y: scroll;
  max-height: 300px;
  clear: both;
}

#photo-viewer-inner-wrap-right img {
  max-width: 30%;
}

#left-arrow {
  float: left;
  width: 30px;
  margin-left: 10px;
}

#right-arrow {
  float: right;
  width: 30px;
  margin-right: 10px;
}

<div id="photo-viewer-outer-wrap">
  <div id="photo-viewer-inner-wrap-left">
    <img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
    <img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
    <img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
  </div>
  <div id="photo-viewer-inner-wrap-right">
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
    <img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
  </div>
</div>

Force Elements Onto New Line

2 Answers2