CODEWITHSUNDEEP
html
Mike Delta
Mike Delta

Reputation: 808

css - align side by side 3 divs of different sizes

I want to obtain this fixed-size table: enter image description here

What I tried:

<div class="my-container">

    <div class="left"></div>

    <div class="middle"></div>

    <div class="right">  </div>

</div>


.my-container{
  display: inline;
  width: 400px;
  height: 50px;
  background-color: green;
}


.left{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: red;
}

.middle{
  display: inline-block;
  width: 300px;
  height: 50px;
  background-color: blue;
}

.right{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: yellow;
}

enter image description here

The result is that I have some space between elements, and my container's size is not exactly equal to the sum of its tree children. I would like to make three children match perfectly with my-container.

Upvotes: 1

Views: 722

Answers (2)

DBS
DBS

Reputation: 9994

If you can, I would suggest using Nandita's answer, however if you can't use flexbox layout for some reason (e.g. browser support):

The spaces are caused by whitespace in the HTML file, this can be resolved in a couple of ways.

  • Remove the whitespace

.my-container {
  display: inline;
  width: 400px;
  height: 50px;
  background-color: green;
}

.left {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: red;
}

.middle {
  display: inline-block;
  width: 300px;
  height: 50px;
  background-color: blue;
}

.right {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: yellow;
}
<div class="my-container">
  <div class="left"></div><!-- These comments "remove" the whitespace without breaking your code formatting too badly
  --><div class="middle"></div><!--
  --><div class="right"></div>
</div>

  • Set the font-size to 0 on the container

.my-container {
  display: inline;
  width: 400px;
  height: 50px;
  background-color: green;
  font-size: 0; /* Make the whitespace take up no actual space */
}

.left {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: red;
  font-size: 16px; /* Make sure to set the font back to normal on the children */
}

.middle {
  display: inline-block;
  width: 300px;
  height: 50px;
  background-color: blue;
  font-size: 16px;
}

.right {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: yellow;
  font-size: 16px;
}
<div class="my-container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"> </div>
</div>

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

Use display: flex; on my-container and remove inline-block from child elements

.my-container {
  display: flex;
  width: 400px;
  height: 50px;
  background-color: green;
}

.left {
  width: 50px;
  height: 50px;
  background-color: red;
}

.middle {
  width: 300px;
  height: 50px;
  background-color: blue;
}

.right {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
<div class="my-container">

  <div class="left"></div>

  <div class="middle"></div>

  <div class="right"> </div>

</div>

OR Add font-size: 0; on my-container element. And add font-size on the divs inside it if it has text in it. 

.my-container {
  display: inline;
  width: 400px;
  height: 50px;
  background-color: green;
  font-size: 0;
}

.my-container div {
  font-size: 16px;
}

.left {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: red;
}

.middle {
  display: inline-block;
  width: 300px;
  height: 50px;
  background-color: blue;
}

.right {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: yellow;
}
<div class="my-container">

  <div class="left"></div>

  <div class="middle"></div>

  <div class="right"> </div>

</div>

Upvotes: 1

Related Questions