Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

Question

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a separate column with its own scrollbar. The remaining divs, whose number may vary, should be stacked in the right column. What CSS settings can I use to achieve this layout? I want to avoid using fixed or absolute positioning if possible.

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
.
.
.
<div id='n'>n</div>

https://i.sstatic.net/HrdCk.png

html css

Answer 1

Answer №1

To achieve the desired outcome, you can utilize Flex. Take a look at this example:

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sit next to each other */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px; /* For demonstration purposes only - should be removed */
}

.column div {
  background-color:#bbb;
  height:50px;
}

.column div:not(:first-child) {
  margin-top:5px;
}

<div class="row">
  <div class="column">
    <div style="height:500px;">div 1</div>
  </div>
  <div class="column">
    <div>div 2</div>
    <div>div 3</div>
  <div>div n</div>
  </div>
</div>

Answer 2

To achieve the desired outcome, you can utilize Flex. Take a look at this example:

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sit next to each other */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px; /* For demonstration purposes only - should be removed */
}

.column div {
  background-color:#bbb;
  height:50px;
}

.column div:not(:first-child) {
  margin-top:5px;
}

<div class="row">
  <div class="column">
    <div style="height:500px;">div 1</div>
  </div>
  <div class="column">
    <div>div 2</div>
    <div>div 3</div>
  <div>div n</div>
  </div>
</div>

Answer 3

Answer №2

You can implement this layout using the display:flex property to avoid using positioning properties.

.main {
    display: flex;
}

.blue {
    height: 600px;
    background-color: blue;
    width: 200px;
    border: 3px solid black;
    margin-right: 30px;
}

.red {
    height: 150px;
    background-color: red;
    width: 150px;
    border: 3px solid black;
    margin-bottom: 10px;
}

<div class="main">
        <div class="left">
            <div class="blue"></div>
        </div>
        <div class="right">
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </div>

Answer 4

You can implement this layout using the display:flex property to avoid using positioning properties.

.main {
    display: flex;
}

.blue {
    height: 600px;
    background-color: blue;
    width: 200px;
    border: 3px solid black;
    margin-right: 30px;
}

.red {
    height: 150px;
    background-color: red;
    width: 150px;
    border: 3px solid black;
    margin-bottom: 10px;
}

<div class="main">
        <div class="left">
            <div class="blue"></div>
        </div>
        <div class="right">
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </div>

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

Answer №1

Answer №2

Similar questions

What is the best way to mandate multiple input fields in AngularJS?

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

Is jQuery the key to Masonry's stacking magic?

Concealing Nested Div Elements

Enhance <th> elements using CSS classes

Issue with random pages where global header.php is not showing a specific image

Issue with AdminLite 2.4.0 data table functionality malfunctioning

Page cannot be adjusted to fit the viewport

Font reference in IE and Chrome causing HTTPS to fail

What is the best choice for the navigation menu: using `<ul>` or `<div>`?

Ensure that adjacent elements operate independently from one another

The height of each list item should expand based on the size of the div contained within it

"Troubleshooting: Why Won't My Entire Div Display on the

The function Mediarecorder.start() is experiencing issues on Firefox for Android and is not functioning

How to retrieve the same value from multiple selections using Vanilla JavaScript and multiple select options?

Employing IF conditions within a form to refine options

Are HTML's Regular Expressions the Equivalent of JavaScript's Regular Expressions?

Connecting mysql workbench data using html: A step-by-step guide

Spinner loading animation not showing correctly

How can I use jQuery to vertically align an element?