CODEWITHSUNDEEP
htmlcss
Nickon
Nickon

Reputation: 10146

Fill space between two static size divs

I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  width: auto;
  float: left;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}
<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

Upvotes: 2

Views: 72

Answers (5)

fnune
fnune

Reputation: 5494

Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);

https://jsfiddle.net/tyvfcbre/1/

.text {
  display:inline-block;
  width:calc(100% - 350px);
  background:lightgrey;
}

Background is there to demonstrate the div position.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114981

Trivial with Flexbox:

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  display:flex;
  justify-content:space-between;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  background:#c0ffee
  }
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}
<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46539

The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  text-align:center;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}
<div class="container">
  <div class="logo"></div>
  <div class="buttons"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
</div>

Upvotes: 4

Jay
Jay

Reputation: 21

Try

.text {
  width: auto;
  float: left;
  text-align: center;
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240858

One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  text-align: center;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  display: inline-block;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}
<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  display: flex;
}
.logo {
  width: 150px;
  height: 50px;
  background-color: darkred;
}
.text {
  margin: auto;
}
.buttons {
  width: 200px;
  height: 70px;
  background-color: darkgreen;
}
<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

Upvotes: 6

Related Questions