CODEWITHSUNDEEP
htmlcssspacing
PrimuS
PrimuS

Reputation: 2683

Div with fixed width before and after fluid DIV

I want to achieve the following: Wish

With a width of 100% in total.

Code & Result:

   

 #sink{
    width: 700px;
      margin: 0px auto;
    }

.lcars.page-header-before {
  width: 1.5em;
  height: 2em;
  border-radius: 50px 0px 0px 50px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-after {
  width: 1.5em;
  height: 2em;
  border-radius: 0px 50px 50px 0px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-middle {
  text-transform: uppercase !important;
  background-color: orange;
  color: blue;
  width: calc(100% - 3.6em);
  display: inline-block;
  height: 2em;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.5em;
  line-height: 1em;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0;
}
   

 <div id="sink">
    <div class="lcars page-header">
      <div class="lcars page-header-before">&nbsp;</div>
      <div class="lcars page-header-middle">TEST</div>
      <div class="lcars page-header-after">&nbsp;</div>
    </div>
    </div>

Unfortunate result: Fail

Where am I wrong? The calculated width is always around 4% too large? Could the whole thing be done in a single div?

Upvotes: 2

Views: 171

Answers (3)

Andrea Ligios
Andrea Ligios

Reputation: 50203

Your math for the middle object is exact (100% - 1.5 - 0.3 - 0.3 - 1.5) = 100% - 3.6em.

But, apart from the aforamentioned inline-block pitfall, solvable in many ways, eg. using HTML comments to connect the divs, there is another problem.

You are using the (default) W3C Box Model. It excludes borders and padding from the width calculation. So if you have width: 100%, border 10% and padding 10%, your total width is 140%.

Then your padding-left: 0.5em; is enlarging your middle element of 0.5em.

You can then revisit your math, taking it to 100% - 4.1em; like in this snippet:

.page-header{
  border : 2px dashed lime;
}


.lcars.page-header-before {
  width: 1.5em;
  height: 2em;
  border-radius: 50px 0px 0px 50px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-after {
  width: 1.5em;
  height: 2em;
  border-radius: 0px 50px 50px 0px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-middle {
  text-transform: uppercase !important;
  background-color: orange;
  color: blue;
  width: calc(100% - 4.1em);
  display: inline-block;
  height: 2em;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.5em;  
  line-height: 1em;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0;
}
<div class="lcars page-header">
  <div class="lcars page-header-before">&nbsp;</div><!--
  --><div class="lcars page-header-middle">TEST</div><!--
  --><div class="lcars page-header-after">&nbsp;</div>
</div>

Or you can choose to adopt the Traditional Box Model instead of the W3C Box Model.

The traditional box model includes borders and padding in the width calculation, as you can see in the following snippet:

* {
    box-sizing: border-box;
}

.page-header{
  border : 2px dashed lime;
}


.lcars.page-header-before {
  width: 1.5em;
  height: 2em;
  border-radius: 50px 0px 0px 50px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-after {
  width: 1.5em;
  height: 2em;
  border-radius: 0px 50px 50px 0px;
  display: inline-block;
  background-color: dodgerBlue;
  color: white;
  line-height: 1em;
}
.lcars.page-header-middle {
  text-transform: uppercase !important;
  background-color: orange;
  color: blue;
  width: calc(100% - 3.6em);
  display: inline-block;
  height: 2em;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.5em;  
  line-height: 1em;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0;
}
<div class="lcars page-header">
  <div class="lcars page-header-before">&nbsp;</div><!--
  --><div class="lcars page-header-middle">TEST</div><!--
  --><div class="lcars page-header-after">&nbsp;</div>
</div>

Read more about the differences between these two Box Models:

Upvotes: 3

Luca Detomi
Luca Detomi

Reputation: 5716

As suggested by Marc, problem is relative to particular behaviour that inline-blocks have.

One solution was already proposed by him, but it has the drawback of poor readability.

If you want to continue to use inline-block instead of floats, and mantain readability, trick is to set font-size:0 to container, and then re-set font-size:12px (or anyone other value) to contents.

<div class="lcars page-header container">
    <div class="lcars page-header-before content">&nbsp;</div>
    <div class="lcars page-header-middle content">TEST</div>
    <div class="lcars page-header-after content">&nbsp;</div>
</div>

.container
{
  font-size:0;
}

.content
{
  font-size:12px;
}

In this way, you workaround problem of empty space given by code indentation, as clearly explained here.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

The problem is due to the white space (line break) between inline blocks.

Try the following:

<div class="lcars page-header">
<div class="lcars page-header-before">&nbsp;</div><div class="lcars page-header-middle">TEST</div><div class="lcars page-header-after">&nbsp;</div>
</div>

Alternatively, you could use floats instead.

A more extensive treatment of this problem can be found at:

How to remove the space between inline-block elements?

Upvotes: 1

Related Questions