Why do I not get this into a 2 column layout?

Question

I fall into despair with this CSS. I can't get it into a 2 two column layout so that my current HTML code is on the left side and some more pics on the right side.

html body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-sarif;
  font-size: 10px;
}
.regal {
  margin: 2em;
  position: absolute;
  display: inline-block;
  border: 1px solid;
}
.regal img {
  max-width: 70%;
  display: block;
}
.box {
  width: 59%;
  height: 45.5%;
  position: absolute;
}
#regal_center {
  top: 17.6%;
  left: 7.3%;
}
#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  height: 100%;
}
#sortable1 li,
#sortable2 li {
  float: left;
  cursor: pointer;
}

<body>
  <div class="regal">
    <img src="sources/images/tp_regal/TP_Regal_leer.jpg" alt="Regal" />
    <div id="regal_center" class="box">
      <ul id="sortable1" class="connectedSortable">
        <li id="medium" class="skin_001"></li>
        <li id="medium" class="skin_001"></li>
        <li id="small" class="skin_001"></li>
      </ul>
    </div>
  </div>
</body>

If I make 2 new div container "left", "right" with 50% and put the class "regal" into the left one so that I could make a right side, the whole thing disappears. I don't know what I'm doing wrong.

Any help would be really appreciated. Thank you very much in advance.

Where is your non-working code? (left and right classes + html) — Pierre C., Aug 23 '16 at 12:35
Was it your intent to use `html body` or did you mean to use `html, body` (so as to apply those properties to both `` and ``)? Your CSS has a lot of confusion to it; using `position: absolute` with `display: inline-block`, mixing CSS to IDs and Classes on the same element, etc. — Robert, Aug 23 '16 at 12:37
i tried to make a codepen with the provided code but its not really working. can you provide the live site or a codepen. — GeorgeButter, Aug 23 '16 at 12:38
Hi, I can't get it working, so I deleted it. I made a
and put in the complete content of — zlep, Aug 23 '16 at 12:38
In your CSS there is not defined class `.left`, so this `
` did nothing... — Legionar, Aug 23 '16 at 12:41
Hi, the basis codepen I used was this: http://codepen.io/Paulie-D/pen/dgcha — zlep, Aug 23 '16 at 12:43

score 0 · Answer 1 · edited May 23 '17 at 12:00

I'm not really following your code set up but if you're trying to have two images in the same div next to each other you might want to try one of these ideas. You can get some more info align images side by side in html

Try to use position: relative for your container and position absolute for your images

div.wrap {
        width: 600px;
        border: 1px solid #f00;
        height: 300px;
        position: relative;
    }

    .wrap img {
        border: 1px solid blue;
         position: absolute;
        bottom: 0;
    }

You could also try to float the images

img  {
    float: right;
}

Why do I not get this into a 2 column layout?

1 Answers1