How to make 3 column two side by side one middle my divs takes everything to left

Question

I am trying to make simple css layout. I want 3 box

{Left}  {center}  {right}

So I write this code

#myleft {
  position: relative;
  float: left;
  width: 20%;
  background-color: #CC6600;
}

#mycenter {
  width: 60%;
  background-color: #f2f4f4;
}

* html #mycenter {
  height: 1%
}

#myright {
  position: relative;
  float: right;
  width: 20%;
  background-color: #FF6633;
}

<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>

but instead of {left} {center} {right}

{left}
{center}
{right}

I don't know why but it goes like this even the float is left and right

Possible duplicate of [How to align 3 divs (left/center/right) inside another div?](https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) — Temani Afif, Jan 28 '18 at 07:50
https://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css — Temani Afif, Jan 28 '18 at 07:51

score 1 · Answer 1 · answered Jan 28 '18 at 06:51

You didn't name your div id's correctly. they should be myleft and myright

body {
  width: 100%;
}

#myleft {
  position:relative;
  float:left;
  width:20%;
  background-color:#CC6600;
}

#mycenter {
  width:60%;
  float: left;
  background-color:#f2f4f4;
}

#mycenter { 
  height:1% 
}

#myright {
  float:left;
  width:20%;
  background-color:#FF6633;
}

<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>

score 0 · Answer 2 · answered Jan 28 '18 at 06:47

Wrap your divs into a main div and try to use Flexbox

Stack Snippet

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

#myleft {
  position: relative;
  width: 20%;
  background-color: cyan;
}

#mycenter {
  width: 60%;
  background-color: #f2f4f4;
}

#myright {
  position: relative;
  width: 20%;
  background-color: cyan;
}

<div class="d-flex">
  <div id='myleft'> Left </div>
  <div id='mycenter'> Center </div>
  <div id='myright'> right </div>
</div>

score 0 · Answer 3 · answered Jan 28 '18 at 06:56

And, of course, there is grid. First wrap the "gridded" elements

<div id='wrapper'>
  <div id='left'> Left </div>
  <div id='center'> Center </div>
  <div id='right'> right </div>
</div>

#wrapper {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
}

Then, optionally, if you want the content of each sub-div to be centered:

#left, #right, #center {
  margin-left:auto;
  margin-right:auto;
}

score 0 · Answer 4 · answered Jan 28 '18 at 06:56

.container {
  display: flex;
}

.box1 {
  flex: 1 ;
  text-align: center;
  background-color: gray;
}

.box2 {
  flex: 2;
  text-align: center
}

.box3 {
  flex: 1;
  text-align: center;
  background-color: gray;
}

<div class="container">
  <div class="box1">
    <p> text</p>
  </div>
  <div class="box2">
    <p> text</p>
  </div>
  <div class="box3">
    <p> text</p>
  </div>
</div>

How to make 3 column two side by side one middle my divs takes everything to left

4 Answers4