CODEWITHSUNDEEP
htmlcss
Kiran
Kiran

Reputation: 916

HTML - CSS design to keep one part at left top and other at right without table

I would like to arrange two divs something like this. One at left top (black) and one at right (red). enter image description here

I could think of 5 approaches which I am mentioning below. Though these are fine, I think there might be a better way to do it. Please, help me to understand if there is a better simple way do it.

(a) Adding CSS like position:absolute; margin-left:30px; (or left) to the right div.

(b) A table with 2 columns, position left div in first column and right div in second column.

(c) Add float:left to left div and something like 'float:left; margin-left:30px; margin-top:-30px;' to the right div.

(d) Making both inline blocks and position.

(e) Using CSS Flexbox.

Upvotes: 1

Views: 59

Answers (1)

Enlico
Enlico

Reputation: 28470

Maybe this would work for you, as a template on which you can build up?

:root {
  box-sizing: border-box;
}

*,
::after,
::before {
  box-sizing: inherit;
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 1em;
  padding: 2em;
  border: 4px solid;
}

.aside {
  flex: 1;
  border-color: red;
}

.main {
  flex: 3;
  border-color: black;
}
<div class="wrapper">
<div class="aside">some text</div>
<div class="main"><p>some other text</p><p>some more text</p></div>
</div>

Upvotes: 2

Related Questions