How can a vertical align a div with a background color inside a div so the background fills up?

Question

Updated question:

I have a bunch of DIV, they are part of a menusystem and are displayed using display:inline-box. Each div contains text. I want to have different background-color on the different DIVs and that the background fills up the whole height of the div and I also want the text to be vertically aligned along all the div. The fiddle below shows that the background color is only used around the text.

Old text: I've spent hours on this. I found the vertical alignment quite easy (for example here: How to vertically align div inside another div without display:table-cell) but cannot figure out how i i can fill the whole div with the background color.

My example code is on fiddle: http://jsfiddle.net/joche/s7beksLt/

<div class="DivParent">
  <div class="DivWhichNeedToBeVerticallyAligned bg1">
    one line
 </div>
  <div class="DivWhichNeedToBeVerticallyAligned bg2">
    <p>one line</p>
 </div>
  <div class="DivWhichNeedToBeVerticallyAligned bg3">
    <p>one line</p>
     <p>two line</p>
  </div>    
  <div class="DivHelper"></div>
</div>

css:

.DivParent {
 height: 100px;
 border: 1px solid lime;
 white-space: nowrap;
 background-color:#deadad;
}

.DivWhichNeedToBeVerticallyAligned {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.bg1 {
background-color:#ffaaff;
}
.bg2 {
background-color:#ffffff;
}
.bg3 {
background-color:#ffffa9;
height:100%
}

.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}

It's not clear what you are trying to do. Do you have an image of what this is supposed to look like? — Paulie_D, Oct 07 '14 at 10:20
Do you want to fill it with same color in all boxes or any specific box with colors. — Mayank, Oct 07 '14 at 10:21
Sorry, something went bad with that fiddle link. I will update my question with the correct link: http://jsfiddle.net/joche/s7beksLt/ — Joche, Oct 07 '14 at 10:49

score 1 · Answer 1 · answered Oct 07 '14 at 10:28

I looked at your JSfiddle, and based on your code and question it's a little misleading. Especially since the code at the fiddle is not the code you posted in your question.

So you are trying to fill each div "cell" with a different background color? If so, those "cells" are of the .DivParent class. The internal divs (which you have labeled .bg1, .bg2, .bg3) are simply composed of the text itself - these divs only extend to the boundaries of the text they include (plus any margins, padding, etc.) The .DivParent is actually the entire "cell". See this image to see what I mean: https://i.stack.imgur.com/U4l90.png

So all you need to do is apply the classes .bg1, .bg2, etc. to the parent classes. Here is my fiddle with each "cell" a different background color: http://jsfiddle.net/Arkatect/8vmp0124/

Notice in the HTML that the separate bg classes are on the parents, not the divs that just have the text:

    <div class="DivParent bg2">
      <div class="DivWhichNeedToBeVerticallyAligned">
        <p>Two</p>
        <p>Lines</p>
      </div><div class="DivHelper"></div>
    </div>

I hope this is what you were looking for.

Yes, i managed to post the wrong fiddle link. The question is updated with the correct link http://jsfiddle.net/joche/s7beksLt/ and I believe that will spread some light on my problem. Maybe your answer can be applied to my problem, I just can't get it to work. — Joche, Oct 07 '14 at 10:52

score 0 · Answer 2 · answered Oct 07 '14 at 10:31

Take a look at this one i made for you without .table-cell :http://jsfiddle.net/csdtesting/sos5sxkj/

.DivParent {
  height: 100px;
  border: 1px solid lime;
  white-space: nowrap;
  background: gray;
  text-align: center;
  position: relative;
}
.DivWhichNeedToBeVerticallyAligned {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
.DivHelper {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<div class="DivParent">
  <div class="DivWhichNeedToBeVerticallyAligned">one line</div>
  <div class="DivHelper"></div>
</div>
<div class="DivParent">
  <div class="DivWhichNeedToBeVerticallyAligned">
    <p>Two</p>
    <p>Lines</p>
  </div>
  <div class="DivHelper"></div>
</div>

How can a vertical align a div with a background color inside a div so the background fills up?

2 Answers2