CODEWITHSUNDEEP
htmlcss
Marian Rick
Marian Rick

Reputation: 3440

Equal gap between three floating divs

I got three divs, each at a random size, while I want to have each gap at the same width (dotted lines):

Some examples:

<Left Div>...............<Mid Div>..............<Right Div>
<Larger Left Div>...........<Mid Div>...........<Right Div>
<Left Div>...........<Mid Div>...........<Larger Right Div>

I can easily align the left and right div using float: left; and float: right;, but can not figure how to center the mid div. I have considered using flexbox or tables or playing around using text-align: justify;

I have made a JS Fiddle Demo to play with, if its helpful. Thanks for any hints.

Upvotes: 3

Views: 76

Answers (3)

Francisco Romero
Francisco Romero

Reputation: 13199

You can just display your center div as inline-block and use text-align: center on your container. With this solution you will not have problems with browser support.

.mainframe {
  width: 100%;
  text-align: center;
}
.left {
  float: left;
}
.center {
  display: inline-block;
}
.right {
  float: right;
}
<div class="mainframe">
  <div class="center">"Center Me!"</div>
  <div class="left">Lorem ipsum</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>

Upvotes: 3

Jinu Kurian
Jinu Kurian

Reputation: 9416

If you are worry about browser support, then you can rely on table. Here's how you do it 

* {
  margin: 0;
}
.mainframe {
  display: table;
  width: 100%;
  table-layout: fixed;
  /* For cells of equal size */
}
.mainframe div {
  display: table-cell;
  text-align: center;
}
<div class="mainframe">
  <div class="left">Lorem ipsum</div>
  <div class="center">"Center Me!"</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

With Flexbox you can use justify-content: space-between

* {
  margin: 0;
}
.mainframe {
  display: flex;
  justify-content: space-between;
}
<div class="mainframe">
  <div class="left">Lorem ipsum</div>
  <div class="center">"Center Me!"</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>

Upvotes: 10

Related Questions