larsks larsks - 7 months ago 13
HTML Question

Coloring the "empty space" in an inline-block layout

I have a simple two column

inline-block
-based layout that consists of a series of chunks that look like:

<div class="outer">

<div class="doc">
Documentation goes here.
</div>

<div class="code">
<pre><code>
int main () {
printf("The code goes here.\n");
}
</code></pre>
</div>

</div>


And the corresponding CSS is:

.doc {
display: inline-block;
margin-right: 5em;
width: 30%;
}

.code {
display: inline-block;
}


I would like the right "column" to have a background color, so I
naively tried this:

.code {
display: inline-block;
background-color: #e0e0e0;
}


But that presented several problems:


  1. The background color is only applied to the length of the lines in
    the
    <pre>
    block, leaving a ragged right edge.

    I can solve this particular issue if I specify an absolute width on the
    class="code"
    column, like this...

    .code {
    display: inline-block;
    background-color: #e0e0e0;
    width: 5in;
    }


    ...but I don't want an absolute width there. I tried
    width: 100%

    (by which I meant "the width of the containing element"), but that
    had no effect.

  2. The background color is not applied to "empty space" that occurs
    when the left
    <div>
    (
    class="doc"
    ) is longer than the right
    <div>
    .

    I'm not sure how to resolve this one.



How do I get the "empty space" in both of these examples to have the
correct background color?

Here is jsfiddle demonstrating things.

Answer

option #1 (for modern browsers)

  • use flexbox

.outer {
  display: flex;
  margin:10px 0
}
.doc {
  margin-right: 5em;
  width: 30%;
}
.code {
  background-color: red;
  flex:1
}
<div class="outer">

  <div class="doc">
    <p>
      Documentation goes here.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis rutrum leo, interdum rutrum dui consectetur eget. Sed sed odio pellentesque, efficitur enim a, ornare odio. Pellentesque semper metus vel ligula tristique, eu suscipit odio porta. Pellentesque
      sagittis nunc sapien, non finibus elit congue ullamcorper. Duis et vulputate sem. Suspendisse dictum egestas sapien, vitae bibendum felis aliquet et. In a augue facilisis, luctus sem ut, auctor nulla. Nullam eget libero in mauris blandit pretium.
      Sed sed porta nunc. Etiam faucibus sed nisl eu suscipit. Phasellus scelerisque in purus in convallis. Donec sed sem ipsum. Nulla ultricies tempus quam, a faucibus quam tincidunt ac. Etiam et purus ultricies, pretium justo vehicula, venenatis risus.
      Vivamus purus dui, auctor id posuere in, dapibus convallis lorem.</p>
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  
  // here is
  // some other code
  </code></pre>
  </div>

</div>
<div class="outer">

  <div class="doc">
    Documentation goes here.
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  </code></pre>
  </div>

</div>

option #2 (for old browsers)

  • use table/table-cell

.outer {
  display: table;
  margin:10px 0
}
.doc {
  padding-right: 5em;
  width: 30%;
  display: table-cell
}
.code {
  background-color: red;
  display: table-cell
}
<div class="outer">

  <div class="doc">
    <p>
      Documentation goes here.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis rutrum leo, interdum rutrum dui consectetur eget. Sed sed odio pellentesque, efficitur enim a, ornare odio. Pellentesque semper metus vel ligula tristique, eu suscipit odio porta. Pellentesque
      sagittis nunc sapien, non finibus elit congue ullamcorper. Duis et vulputate sem. Suspendisse dictum egestas sapien, vitae bibendum felis aliquet et. In a augue facilisis, luctus sem ut, auctor nulla. Nullam eget libero in mauris blandit pretium.
      Sed sed porta nunc. Etiam faucibus sed nisl eu suscipit. Phasellus scelerisque in purus in convallis. Donec sed sem ipsum. Nulla ultricies tempus quam, a faucibus quam tincidunt ac. Etiam et purus ultricies, pretium justo vehicula, venenatis risus.
      Vivamus purus dui, auctor id posuere in, dapibus convallis lorem.</p>
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  
  // here is
  // some other code
  </code></pre>
  </div>

</div>
<div class="outer">

  <div class="doc">
    Documentation goes here.
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  </code></pre>
  </div>

</div>

Comments