Placing two divs side by side does is not working with inline-block

HTML-CSS
1

How can I place these two blocks side by side? I tried Googling and couldn’t find a solution that worked for me.

HTML:

 <div class="wgs">
      <div class="wgs_mole-head">
        <img src="/mole-head.png" alt="A lovely Mole">
      </div>
      <div class="wgs_dirt-pile">
        <img src="/mole-hill.png" alt="A lovely Mole">
      </div>
    </div>

    <div class="wgs">
      <div class="wgs_mole-head">
        <img src="/mole-head.png" alt="A lovely Mole">
      </div>
      <div class="wgs_dirt-pile">
        <img src="/mole-hill.png" alt="A lovely Mole">
      </div>
    </div>

CSS :


.wgs {
    background-color: red;
    position: relative;
}

.wgs_mole-head {
    position: absolute;
    display: inline-block;
    left: 109px;

}

.wgs_dirt-pile{
    position: absolute;
    display: inline-block;
    top: 262px;

}
2

I find css grid to be the best tool for these things.

4

BUT…shouldn’t the display being set to inline-block force that second div to be beside the first? How can I solve it using this method?

5

Have you given the container divs widths so they can both fit side by side? Also you could put both container divs in 1 big container div and give it display flex, that should line them up side by side as long as they are sized suitably

6

Setting a width for the div with .wgs? I tried that, but nothing changes.

7

Not if you are using absolute positioning to place them on the page.

8

I’m trying to accomplish something like this https://jsfiddle.net/xv9jfa04/

9

Is there a way to accomplish this without removing absolute positioning?

10

Notice in the fiddle you linked to that they don’t have absolute positioning set on the divs that they have set to inline-block. Just curious, why are you insisting that these divs must have absolute positioning? Remember, when you use absolute positioning then it takes the element out of the natural flow and thus things like display: inline-block have no effect.

I suppose if you must use absolute positioning on these then use the left/right properties to put them side by side.

11

I have an image overlapping another and I used absolute positioning to get the result I want. Everything works up to that point. Next, I try to duplicate both images overlapping, but next to each other instead of a set being on top of the other. That’s where my issue is, I hope I’m making some sense. If I remove absolute positioning on the .wgs_mole-head or .wgs_dirt-pile the image created with both images is distorted.

12

I’m afraid I can’t really visualize what you are trying to do without seeing the actual images on the page. Or you could add height/widths and borders to the images so I could at least see how big they are going to be. But at this point I’m not sure I can be of anymore help until I get more detailed information about what you are trying to do.

I can tell you though that having absolute positioning on a div completely removes any effects you might gain from setting the display to inline-block.

Also, if you are going to provide updated code or images please host it someplace and provide a link.

13

Thank you for your suggestion. I went ahead and uploaded a demo of what I’m trying to accomplish here.

14

Thanks for the link. Now I need you to explain exactly what you are trying to do because I don’t understand yet. Be as specific and clear as possible. What exactly are you trying to place side-by-side. Please reference the elements in your HTML, such as their class names.

15

I would like to place .container2 beside .container1. I’m trying to accomplish this by giving both .container2 and .container1 the property of display with a value of inline-block. In the end, .container1 should be on the same line as .container2. With .container1 being on the left side and .container2 being on the right side.

16

I’m not sure why you think you need that absolute positioning of your images inside the container. It only messes things up. You can arrange them side by side either with display: inline or display:flex.

Example with inline (note the white gaps - that’s the downside of inline elements):

.container1,
.container2 {
  display:inline;
}

Example with flex:

body,
.container1,
.container2 {
  display:flex;
}

That’s really all the CSS you need. Is there a reason why you want absolute positioning?

EDIT Alright I just read the whole thread, so you need absolute positioning for some reason (I’m not sure though if you really need it, we’d have to see exactly what you’re trying to do). Just note that when you have two images inside a container, and you set them both to absolute, they’re always going to overlap unless you give them different values for left/right.

17

I don‘t know if this is what you want to get. If it‘s so, I see that it‘s easier to use flexbox and its utilities. I commented out your original assets. I added one more div to encompass all the content. I added some pics because when no “real” image, browser does not render just spaces; replace the images with your own ones.

Maybe it‘s more convenient a row with for columns but if you have two blocks with two sub-blocks… you may have your reason. I tried to respect at the most your mark up.

18

So just how these two sets of the div .wgs are displaying is what I am trying to accomplish. The only difference is that I am also trying to keep the second image overlapping the first. So in the end, I should have two sets of the .wgs displaying, one next to the other, but with the images still overlapping.

19

Well, I just UNcommented the position properties and added a height value to the “.wgs” class. I disregard the “display-inline” property (still commented). Now you see in the same pen (a new one) how the position values take effect. The important thing is not to fall in conflicts.

Remember, what goes below in the declaration of the CSS is the one who may win due to cascade, heritage and specificity, depends on the declared properties.

20

One more note: when you applied position attribute, it’s important to know what kind of effects they make. When you set a position absolute, for default the element goes to the to top left corner of its ancestor (parent) until you set a “position” from the top or the left.
Check this new pen and uncomment the top and left values to see what happens, and then comment (disbale) the “position: absolute;” and see the resuts. You can also uncomment the other properties of the class “.total” to see the effects more clear.

When you set an element to position absolute, it’s taken out of the normal flow, as if it just disspaears, so the following element takes its space.

21

Looking at the image name I assume it’s for a Whac-A-Mole game or something?

Example pen