How to arrange divs one over another?

Question

How can I arrange divs one over another?
I've tried float, clear, all positions but it doesn't work.

img {
  float: left;
  padding-right: 15px;
}

1 {
  position: absolute;
  clear: left;
}

2 {
  position: absolute;
}

<div id="1">
  <img src="//via.placeholder.com/300x300" alt="imagine" width=300 height=300 />
  <p>Mos Goriot - Honore de Balzac<br> 10 lei</p><br>
</div>

<div id="1">
  <p><img src="//via.placeholder.com/220x300" alt="imagine" width=220 height=300 /> Peter Camenzind - Herman Hesse<br>15 lei</p>
</div>

Here's a screenshot of how it currently looks:

you want it like on the image or you want it to show one over the other? — JoelBonetR, Mar 09 '18 at 19:19
Hi Octav. Welcome to SO. You should not post links in your SO question. You need to actually post the code that you've tried. Also, please read How to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — James Milani, Mar 09 '18 at 19:20
Moreover, you're trying to select ID 1 and 2 with 1 and 2 instead of using #1 and #2 on your CSS. — JoelBonetR, Mar 09 '18 at 19:22

score 0 · Answer 1 · answered Mar 09 '18 at 19:27

There are a couple of issues with your code:

IDs must be unique.
To reference an ID in CSS, start with the # sign.

#id_value { style properties }

See CSS ID Selectors @ MDN.

Below, I'm using a "clearfix" method. For more reference, see:
What is a clearfix?
What methods of clearfix can I use?
Chris Coyier on Clearfix

.group:after {
  content: "";
  display: table;
  clear: both;
}

.entry {
  margin: 0 0 1em;
}

img {
  float: left;
  margin-right: 15px;
}

<div class="entry group">
  <img src="//via.placeholder.com/300x300" alt="imagine" width=300 height=300 />
  <p>Mos Goriot - Honore de Balzac<br> 10 lei</p>
</div>

<div class="entry group">
  <img src="//via.placeholder.com/220x300" alt="imagine" width=220 height=300 />
  <p>Peter Camenzind - Herman Hesse<br>15 lei</p>
</div>

How to arrange divs one over another?

1 Answers1