Div with fixed width before and after fluid DIV

Question

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?

Missing some CSS for `.lcars.page-header` – Rimble Feb 16 '15 at 13:52 — Rimble, Feb 16 '15 at 13:52

score 3 · Answer 1 · edited May 23 '17 at 12:28

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:

The `box-sizing` property is very useful in this context, nicely pointed out. — Marc Audet, Feb 16 '15 at 14:48

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

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?

edited May 23 '17 at 12:28

Community

1
1

answered Feb 16 '15 at 13:53

Marc Audet

46,011
11
63
83

Or with comments as suggested in [mine answer](http://stackoverflow.com/a/14776780/1654265) – Andrea Ligios Feb 16 '15 at 13:56
1

@AndreaLigios I added a reference to the question that you answered since it addresses the underlying problem in more depth. Thank you for your comment. – Marc Audet Feb 16 '15 at 14:02

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

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.

edited May 23 '17 at 12:28

Community

1
1

answered Feb 16 '15 at 14:03

Luca Detomi

5,564
7
52
77

With Marcs answer I get the same result as my own? With yours it is still too wide and below "Test" there is space which should not be there, no matter what font-size I have (the gap changes accordingly). I want to have a white background behind "Test" so I guess I need a colored span? Should be the same height as the whole thing, so horizontical fill it. The little white gaps after and before the orange bar are intended (width of gaps is 0.3em each). Sorry, but I don't get what I am doing wrong, even with your answer(s). – PrimuS Feb 16 '15 at 14:35
edited above question Luca and @Marc Audet I discovered that I have a parent div with a fixed width of 700px; which breaks it. Removing the 700px; gives the required result (but breaks the page of course) – PrimuS Feb 16 '15 at 15:02

Div with fixed width before and after fluid DIV

3 Answers3