divs with images behave abnormally

Question

I've been trying to group together certain divs and a div with image inside but the div with the image keeps pushing all other divs that are supposed to be in the same line to the next line.

-> This looked similar to what empty divs do without an " " inside so I tried this and didn't work

-> this is exactly similar but none of them worked

Any other stuff that's left that I can try and make this work?

Here's my code:

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

div {
  display: inline-block;
  box-sizing: border-box;
  margin: 1px;
  background: red;
  border: 10px purple dashed;
  width: 33%;
  height: 300px;
  font-size: 100px;
}

img {
  max-height: 100%;
  max-width: 100%;
}

<div class="Somename">h</div>
<div class="Somename">&nbsp;</div>
<div class="Somename">h</div>
<div class="Somename">&nbsp;</div>
<div class="Somename"><img src="https://placekitten.com/1920/1080" alt=""></div>
<div class="Somename">h</div>

What this renders in the browser is this

can you try to add flex: 1 to the div – Subha May 10 '21 at 07:49 — Subha, May 10 '21 at 07:49
Add `vertical-align: middle` to div. – Prakash M May 10 '21 at 07:58 — Prakash M, May 10 '21 at 07:58

score 1 · Accepted Answer · answered May 10 '21 at 08:32

1

Try adding flex and vertical-align to the CSS like so

div {
  display: inline-block;
  box-sizing: border-box;
  margin: 1px;
  background: red;
  border: 10px purple dashed;
  width: 33%;
  height: 300px;
  font-size: 100px;
  flex: 1;
  vertical-align: top;
}

Here is the CodePen, it works

answered May 10 '21 at 08:32

Subha

562
2
9

@RacGreen1 as others have said there are many many ways of achieving the same result with and without inline-block. Since you wanted a one with inline-block the issue was with the vertical alignment. I set it to top. The flex: 1 is not immediately necessary but will prevent any misbehavior later on when you add more styling. – Subha May 10 '21 at 08:37

score 0 · Answer 2 · answered May 10 '21 at 08:13

What you want to achieve should be done using CSS grid, not some error-prone deprecated layout technique like inline-block.

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.Somename {
  box-sizing: border-box;
  margin: 1px;
  background: red;
  border: 10px purple dashed;
  font-size: 100px;
}

img {
  max-height: 100%;
  max-width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 300px);
}

<div class="grid-container">

  <div class="Somename">h</div>
  <div class="Somename">&nbsp;</div>
  <div class="Somename">h</div>
  <div class="Somename">&nbsp;</div>
  <div class="Somename"><img src="https://placekitten.com/1920/1080" alt=""></div>
  <div class="Somename">h</div>

</div>

Is there any way to find out where it went wrong with inline-block? — RacGreen1, May 10 '21 at 08:29

Usama Saeed · Answer 3 · 2022-03-03T18:33:49.120

You can also use flex for this. Just wrap your divs in a parent div.

    <div class="container1">
        <div class="Somename">h</div>
        <div class="Somename">&nbsp;</div>
        <div class="Somename">h</div>
        <div class="Somename">&nbsp;</div>
        <div class="Somename">
            <img src="https://placekitten.com/1920/1080" alt="">
        </div>
        <div class="Somename">h</div>
    </div>

CSS

body {
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
}

.container1{
   display: flex;
}

.Somename {
   display: inline-block;
   box-sizing: border-box;
   margin: 1px;
   background: red;
   border: 10px purple dashed;
   width: 33%;
   height: 300px;
   font-size: 100px;
}

.Somename > img {
   max-height: 100%;
   max-width: 100%;
}

divs with images behave abnormally

3 Answers3