What is the best way to position two horizontal divs beside a vertical one?

Question

What is the best way to position two horizontal divs beside a vertical one?

I need assistance aligning my content in the following format:

┌────┬─────────────────────────────────┐
│ No │  Some possible long content     │
│    ├─────────────────────────────────┤
│    │  Not so long stuff              │
└────┴─────────────────────────────────┘

I am considering using divs instead of tables to achieve this layout. It is not tabular data, just a way to present a counter, a title, and a subtitle:

<div id="container">
    <div class="div1">No</div>
    <div class="div2">Some possible long content</div>
    <div class="div3">Not so long stuff</div>
</div>

The width of 1 is fixed, while its height should be the combined height of 2 and 3. 3 will always be one line, but 2 can be multiple lines.

Any guidance on how to achieve this layout would be greatly appreciated.

html css

Answer 1

Answer №1

If you adjust the HTML structure to encapsulate the divs on the right side, then flexbox can help with that.

.container {
  width: 50%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
}
.div1,
.right {
  display: flex;
  flex-direction: column;
}
.div1,
.right > div {
  padding: 1em;
}
.div1 {
  background: orange;
}
.div2 {
  background: pink;
}
.div3 {
  background: lightblue;
}

<div class="container">
  <div class="div1">No</div>
  <div class="right">
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet explicabo omnis, suscipit laborum officiis, eius sint ipsam doloremque magnam reiciendis corporis repudiandae ducimus laboriosam ex! Porro dolores aut vitae. Assumenda ut laborum dolor
      fugiat ullam nihil enim sapiente ex vel praesentium quo dolores distinctio, aliquid perferendis non accusamus dolorum excepturi?</div>
    <div class="div3">Not so long stuff</div>
  </div>
</div>

Answer 2

If you adjust the HTML structure to encapsulate the divs on the right side, then flexbox can help with that.

.container {
  width: 50%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
}
.div1,
.right {
  display: flex;
  flex-direction: column;
}
.div1,
.right > div {
  padding: 1em;
}
.div1 {
  background: orange;
}
.div2 {
  background: pink;
}
.div3 {
  background: lightblue;
}

<div class="container">
  <div class="div1">No</div>
  <div class="right">
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet explicabo omnis, suscipit laborum officiis, eius sint ipsam doloremque magnam reiciendis corporis repudiandae ducimus laboriosam ex! Porro dolores aut vitae. Assumenda ut laborum dolor
      fugiat ullam nihil enim sapiente ex vel praesentium quo dolores distinctio, aliquid perferendis non accusamus dolorum excepturi?</div>
    <div class="div3">Not so long stuff</div>
  </div>
</div>

Answer 3

Answer №2

To achieve a particular layout, you can utilize css's display:table and display:table-cell

For a live example, check out this link: http://jsfiddle.net/8qv9z762/

#container {
    display: table;
    background-color: #dda;`
    height: 1px; /*it might seem strange but it's crucial (forgot the reason)*/
}
.r {
    display: table-cell;
}
.div1 {
    height: 100%;
}
.div1, .div2, .div3 {
    border: solid 1px;
    padding: 5px 8px;
}

For further visual reference, visit: https://i.sstatic.net/OPYqy.png

This method provides better compatibility across various browsers as compared to flexbox which is still not universally supported.

The table-cell property is compatible all the way back to ie8, whereas flex is only supported from ie11 onwards (last two versions)

The drawback of using this technique is the inability to use margins directly. However, this can be overcome by creating another child container within the table-cell div to act as a wrapper with margins.

Answer 4

To achieve a particular layout, you can utilize css's display:table and display:table-cell

For a live example, check out this link: http://jsfiddle.net/8qv9z762/

#container {
    display: table;
    background-color: #dda;`
    height: 1px; /*it might seem strange but it's crucial (forgot the reason)*/
}
.r {
    display: table-cell;
}
.div1 {
    height: 100%;
}
.div1, .div2, .div3 {
    border: solid 1px;
    padding: 5px 8px;
}

For further visual reference, visit: https://i.sstatic.net/OPYqy.png

This method provides better compatibility across various browsers as compared to flexbox which is still not universally supported.

The table-cell property is compatible all the way back to ie8, whereas flex is only supported from ie11 onwards (last two versions)

The drawback of using this technique is the inability to use margins directly. However, this can be overcome by creating another child container within the table-cell div to act as a wrapper with margins.

Answer 5

Answer №3

If you're looking to position elements precisely, consider using absolute positioning. Check out this example: https://jsfiddle.net/sueba6t2/1/

Here's the CSS based on a modified HTML structure with some class name changes:

.container {
    position: relative;
}
.d1 {
    height: 100%;
    position: absolute;
    width: 3em;
}
.d2, .d3 {
    margin-left: 3em;
}

Alternatively, if you prefer newer techniques, try utilizing flexbox: https://jsfiddle.net/k7e01o29/

HTML:

<div>
    <nav>No</nav>
    <article>
        <section>Long content</section>
        <footer>Not long</footer>
    </article>
</div>

CSS:

div {
    display: flex;
    flex-direction: row;
}
article {
    width: 100%;
}

Please note that flexbox may not be supported in all browsers. If compatibility is crucial, be prepared to use polyfills for older versions like IE10 or below. While flexbox offers more versatility, it also comes with limitations in terms of browser support.

For additional information on browser support, you can refer to http://caniuse.com/#search=flex.

Answer 6

If you're looking to position elements precisely, consider using absolute positioning. Check out this example: https://jsfiddle.net/sueba6t2/1/

Here's the CSS based on a modified HTML structure with some class name changes:

.container {
    position: relative;
}
.d1 {
    height: 100%;
    position: absolute;
    width: 3em;
}
.d2, .d3 {
    margin-left: 3em;
}

Alternatively, if you prefer newer techniques, try utilizing flexbox: https://jsfiddle.net/k7e01o29/

HTML:

<div>
    <nav>No</nav>
    <article>
        <section>Long content</section>
        <footer>Not long</footer>
    </article>
</div>

CSS:

div {
    display: flex;
    flex-direction: row;
}
article {
    width: 100%;
}

Please note that flexbox may not be supported in all browsers. If compatibility is crucial, be prepared to use polyfills for older versions like IE10 or below. While flexbox offers more versatility, it also comes with limitations in terms of browser support.

For additional information on browser support, you can refer to http://caniuse.com/#search=flex.

What is the best way to position two horizontal divs beside a vertical one?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to incorporate a PHP variable into my Jquery image slider?

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

What could be causing my CSS background image to not display properly?

a practical guide on implementing overflow-x in the row class

Which is the better approach for performance: querying on parent selectors or appending selectors to all children?

Is it necessary to save the details of a specific position in local storage when sliding?

Creating a Web Form in Outlook Using the POST Method

Utilizing React JSX within HTML structures

I encountered an error stating "loadmodel is not defined" while I was using PHP and a JavaScript file with the type=module

Stop Gmail from Removing Attached HTML Files

Pictures fail to load on Safari browser for desktop and iPhone, yet display correctly on various other smartphones and Windows browsers

Steps for aligning an image to the right using Bootstrap Vue

Tips for centering multiple images vertically within a div

Automate website button clicks using Python and Selenium

The arrow icon on the select control is not showing up as expected in a form that is using Bootstrap when viewed in the

Can elements be eliminated from a div based on their order?

How do I retrieve the value of a class that is repeated multiple times?

Interacting with a Bootstrap menu

menu icon not being hidden in media query

When I apply flex to the display of .ant-steps-item-icon, the connection between the steps vanishes