How to align spanning elements on same line

Question

I want to build a simple web application with css, but I've been running into a problem. Here is the basic idea of what I need the structure to look like

I want element 2 and element 3 to be on the same line, but element 3 will not stay on the same line as element 2, and if I force it to stay on that line with inline-block, it doesn't take up the full width of the page.

How can I make the elements fit this way? I'd rather not use absolute positioning, but I don't see any way of making this work.

@font-face {
  font-family: Assistant;
  src: local("Assistant"), local("Assistant-Bold"), url(assets/Assistant.ttf);
  font-weight: bold;
}

:root {
  --m-body-bg-color: teal;
  --m-font: Assistant;
  --m-font-fg: whitesmoke;
  --m-main-fg: crimson;
  --m-gaps-px: 10px;
  --m-container-radius: 10px;
}

body {
  background-color: var(--m-body-bg-color);
  position: relative;
  width: 100%;
  height: 100%;
}

.m-container {
  position: relative;
  margin: var(--m-gaps-px);
  border-radius: var(--m-container-radius);
  width: 100%;
  height: 100%;
  border: 2px solid var(--m-main-fg);
  background-color: var(--m-main-fg);
  display: inline-block;
}
.no-span {
  width: fit-content !important;
}
#page-container {
  height: 100%;
  width: calc(100% - var(--m-gaps-px) * 4);
}
#page-container {
  margin: var(--m-gaps-px);
}

<html lang="en-us">
  <body>
    <div id="page-container">
      <div class="m-container" id="element-1">
      </div>
      <div class="m-container no-span" id="element-2">
        theres some content here that i want to fit
      </div>
      <div class="m-container" id="element-3">
      </div>
      <div class="m-container" id="element-4">
      </div>
    </div>
  </body>
</html>

score 1 · Answer 1 · answered Jan 09 '22 at 15:55

1

Interesting maybe you could try:

display:flex;

For both elements

answered Jan 09 '22 at 15:55

Daniel

11
3

Arman Ebrahimi · Answer 2 · 2022-01-09T17:29:54.487

Use grid. Try it:

.container {
  display: grid;
  grid-template-columns: 6(1fr);
  grid-gap: 10px;
}

.item {
  background-color: green;
  padding: 30px;
  border: solid red;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.item1 {
  grid-column: 1 / 7;
}

.item2 {
  grid-row: 2 / 4;
}

.item3,
.item4 {
  grid-column: 2 / 7;
}

<div class="container">
  <div class="item item1">element1</div>
  <div class="item item2">element2</div>
  <div class="item item3">element3</div>
  <div class="item item4">element4</div>
</div>

Although the grid is a better way, but also with flex is a thing like this:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: green;
  padding: 30px;
  border: solid red;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.item1 {
  width: 100%;
}

.item2 {
  width: 15%;
  margin-top: 10px;
  margin-right: 1%;
  word-wrap: break-word;/*for code snippet. no need for wide pages. */
  padding: 20px;/*for code snippet. no need for wide pages. */
}

.flex {
  width: 84%;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border: solid yellow;
}

.item4 {
  margin-top: 10px;
}

<div class="container">
  <div class="item item1">element1</div>
  <div class="item item2">element2</div>
  <div class="flex">
    <div class="item">element3</div>
    <div class="item item4">element4</div>
  </div>
</div>

This is the best possible way which I can also suggest to you @CoolElectronics. You can also use `display: flex` but you need to add additional code to your HTML. — Aniket Sharma, Jan 09 '22 at 16:34
@AniketSharma Thanks, yes now that you said, also I added flex to my answer, but as that you said, the grid is the best way in here. — Arman Ebrahimi, Jan 09 '22 at 17:32

score 0 · Answer 3 · answered Jan 09 '22 at 16:04

I would rather suggest you to learn CSS Grids. It has a pretty nice and well-organized documentation on W3Schools. It will really help you solve these small problems even in future and creating larger projects in future. For now, (e.g. if you do not have much time now to go and learn), you can create a table and then add your elements in table and arrange them. However, it is not recommended if you look forward to publish this page on web, because it is depreciated for search engine optimzations.

How to align spanning elements on same line

3 Answers3