0

I have created following html layout.

<div class="main-section">

   <div class="column-one">Column left</div>
   <div class="column-two">Column left</div>

   <div class="column-three">Column right</div>
</div>

I want to create 2 column section like below:

------------------------------------
|              |                   |
| Column One   |   Column Three    |
| Column Two   |                   |
------------------------------------

Is there any way to make like this? Only for CSS, Not need to js or jquery. Also we need to achive this without change html layout. Use only css for this.

It is not similar question with another.

Mohit Gupta
  • 11
  • 1
  • 1
    this can be done with flex but you would need to wrap columns 1 & 2 in a parent wrapper then apply flex to that and column 3 – gavgrif Jul 06 '20 at 12:27
  • 2
    You can use the `display:grid` to achieve this and without any JQuery or JavaScript – Rajpal Singh Jul 06 '20 at 12:29
  • Could you post what you found while doing the research regarding this? – Zuckerberg Jul 06 '20 at 12:30
  • You can add something like this (CSS): div.main-section { display: grid; grid-template-columns: auto auto; } div.column-one, div.column-two { grid-column: 1; } div.column-three { grid-column: 2; grid-row: 1/ span 2; } – MaD Jul 06 '20 at 12:39
  • no more difficult than: `.main-section { column-count: 2; column-width: 50% }` – Rene van der Lende Jul 06 '20 at 13:04
  • "It is not similar question with another"—how is it different from the marked duplicate? You need to justify comments like this. – ChrisGPT was on strike Jul 06 '20 at 14:36

0 Answers0