How to create 3 column layout using css without using grid(For ie 10 compatibility)

Question

How to convert following HTML, similar to the image? Do not wrap elements inside another div. My purpose is to change the position of each elements to left, right or top using css only. Is it possible?

    <div class="container">
        <div class="left">1</div>
        <div class="left">2</div>
        <div class="left">3</div>
        <div class="left">4</div>
        <div class="right">5</div>
        <div class="center">6</div>
        <main class="main-content"></main>
    </div>

This is not possible especially with this html structure. You need to change html structure or use jquery. :) — jaydeep patel, Jan 13 '20 at 10:06
@jaydeeppatel My purpose is to change the position of each elements to left, right or top using CSS only. Is it possible? — Prajith SN, Jan 13 '20 at 10:11
Do you need to follow the exact numbers or can you change the markup as well? — volt, Jan 13 '20 at 10:23
Why is block 3 on the right in your graphic? Is that where you want it even though it has a class of `.left`? — Moob, Jan 13 '20 at 18:02

score 0 · Answer 1 · edited May 30 '23 at 17:53

div.container {
  width:100%;
  position:relative;
  height:100%
}
.col {
   min-heght:20px;
   float: left;
}
.col-inner {
  padding: 10px;
  background: gray;
}
.col-60 .col-inner {
  padding: 10px;
  background: blue;
}
.col-20{
  width:20%;
  position:relative;
  line-height: 60px;
   
}
.col-60{
 width:60%;
 position:relative;
 line-height: 60px;
}
.item {
    border: 1px solid;
    margin: 2px;
    text-align: center;
    min-height: 60px;
    border-radius: 5px;
    vertical-align:middle;
    background: #ddd;
}
.main-contain{
  min-height: 200px;
  line-height: 2000px;
}

<div class="container">
    <div class="col col-20">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">4</div>
    </div>
    <div class="col col-60">
        <div class="item">6</div>
        <div class="item main-contain">main</div>
    </div>  
     <div class="col col-20">
          <div class="item">3</div>
          <div class="item">5</div>
     </div> 
</div>

.col-inner is defined in css, but not used in the html, I think it's safe to remove '.col-60 .col-inner' and '.col-inner' from css style — adiian, May 30 '23 at 07:24

Alexandru Iancu · Answer 2 · 2020-01-13T12:07:06.610

** EDIT 2: It's almost impossible to move arrange elements using only HTML and CSS. There might probably be a solution for this, but the most efficient one would be to use the jQuery appendTo() function.

This article might be of great use to you: How to move an element into another element?

** EDIT: I figured out lately what you were looking for. I'll try to find an answer for your issue as soon as possible.

Based on your example, you can achieve this by creating 3 columns(in my code I used divs with "column" class) and applying display: inline-block; to them, making sure that the sum of the columns combined won't be higher than 99%.

The display: inline-block will try to use the whole width of the parent container, without the content to overflow it. When the width is larger than 99%, the last column is sent to the next row.

HTML

<div class="column one-fourth">
  <div><p>1.1</p></div>
  <div><p>1.2</p></div>
  <div><p>1.3</p></div>
</div>
<div class="column two-fourth">
  <div><p>2.1</p></div>
  <div><p>2.2</p></div>
</div>
<div class="column one-fourth">
  <div><p>3.1</p></div>
  <div><p>3.2</p></div>
  <div><p>3.3</p></div>
  <div><p>3.4</p></div>
</div>

CSS

.column {
  text-align: center;
  vertical-align: top;
  padding: 10px 0px;
  display: inline-block;
  width: 100%;
}

@media only screen and (min-width: 900px) {
.column.one-fourth { width: 24.75%; }
.column.two-fourth { width: 49.5%; }
}

.column div {
  background: red;
  margin: 10px;
}

.column p {
  color: white;
  font-weight: bold;
  font-size: 50px;
  margin: 0px;
}

Here's a codePen to see how it works: https://codepen.io/ialexandru/pen/NWPzRZj

How to create 3 column layout using css without using grid(For ie 10 compatibility)

2 Answers2