3

I want to create 3 columns with CSS but why can I only see 1 column instead of 3 with CSS?

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  width: 25%;
  min-width: 300px;
}

.column:nth-child(2) {
  width: 50%;
  min-width: 600px;
}
<div class="container">
  <div class="column">
    <!-- First column content -->
    col 1
  </div>
  <div class="column">
    <!-- Second column content -->
    col 2
  </div>
  <div class="column">
    <!-- Third column content -->
    col 3
  </div>
</div>

https://jsfiddle.net/v1947art/

tacoshy
  • 10,642
  • 5
  • 17
  • 34
user310291
  • 36,946
  • 82
  • 271
  • 487
  • 2
    remove the 100vh height from the .column class. Also, give a display: flex to .container to display the columns horizontally – Jinu Kurian Apr 27 '23 at 05:27

3 Answers3

4

Because divs are block-level elements that will be displayed below each other by default. Add flexbox to the parent container:

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  width: 25%;
  min-width: 300px;
}

.column:nth-child(2) {
  width: 50%;
  min-width: 600px;
}

/* add flexbox to the parent */
.container {
  display: flex;
}
<div class="container">
  <div class="column">
    <!-- First column content -->
    col 1
  </div>
  <div class="column">
    <!-- Second column content -->
    col 2
  </div>
  <div class="column">
    <!-- Third column content -->
    col 3
  </div>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
-1

your height is

height: 100vh; which causes the columns to go down if you scroll down you will see the col2.If you still cant find it press ctrl+f then type col2 you will find it if you want to keep the 3 cols in same sight decrease the height

Ali Anjum
  • 9
  • That was not the question. Even if you remove the `height: 100vh` (which is set for a purpose) the columns will be below each other. – tacoshy Apr 27 '23 at 05:33
-1

You need below changes in your CSS

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  float: left;
}

.column:first-child,
.column:last-child {
  width: 25%;
}

.column:nth-child(2) {
  width: 50%;
}
<div class="container">
    <div class="column">
        <!-- First column content -->
    col 1
    </div>
    <div class="column">
        <!-- Second column content -->
    col 2
    </div>
    <div class="column">
        <!-- Third column content -->
    col 3
    </div>
</div>
Rutvi Trivedi
  • 93
  • 7
  • `float` is a property to float an element within a text block such as images in a newspaper. `float` is **not** a property to align elements next to each other. Since 2015 you should not use the float-hack for that purpose anymore as you since then have a well-supported Flexbox and CSS Grid. – tacoshy Apr 27 '23 at 05:55