Float Left, Center, And Float Right 3 Div On The Same Line

I have 3 div that contain both text and image. I would like to show them on the same line with the 1st div on left, 2nd div in the center, and the 3rd div on the right. I can do CS

Solution 1:

I do not want to have a fix width as the 3 div can have variable width

So:

option 1

• set display:table/table-cell

section {
  display: table;
  width: 100%
}
article {
  border: 1px red solid;
  display: table-cell;
}

<section><article>article 1</article><article>article 2</article><article>article 3</article></section>

option 2

• set display:flex

section {
  display: flex;
}
article {
  border: 1px red solid;
  flex:1
}

<section><article>article 1</article><article>article 2</article><article>article 3</article></section>

Solution 2:

So your requirement is to have three divs spread on each part of the page left, center and right. You are not really looking for a column layout. You might be able to do this using an additional div. Check the jsfiddle link which is one way of doing this.

.onLeft {
  display: inline;
  float: left;
  width: 30%;
  background-color: #ccc;
}
.onCentre {
  float: left;
  width:40%;
  background-color: red;
}
.realCentre {
  margin: 0 auto;
  width: 90%;
  background-color: #efefef;
}

.onRight {
  display: inline;
  float: right;
  width: 30%;
  background-color: #ddd;
}