How do I make this inner div stretch to 100 % width?

Question

I have one header, and two div elements. The outer div is vertically centered in my header element. I want the inner div to stretch to 100% width. How do i do this?

Check this fiddle for reference. I want the blue section to take up 100 % of the total width.

Here's the code aswell:

HTML:

<header id="header-index">
    <div id="header-index-inner">
        <div id="inner-div">

                <h1>Header</h1>               
                <h5>Subheader1 </h5>
                <h5>Subheader2 </h5>

        </div>
    </div>
</header>

CSS:

#header-index{    
    background-color: red;
}

#header-index-inner{   
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    height: 400px;
}

#inner-div{
  background-color:blue;
  width:100%;
}

Possible duplicate of [Why is width: 100% not working on div {display: table-cell}?](http://stackoverflow.com/questions/17736570/why-is-width-100-not-working-on-div-display-table-cell) — Sam, Jan 07 '16 at 21:54

score 1 · Answer 1 · answered Jan 07 '16 at 21:53

1

Add the following to the #header-index rule:

display:table;
width:100%;

answered Jan 07 '16 at 21:53

Sam

9,933
12
68
104

score 1 · Accepted Answer · answered Jan 07 '16 at 21:53

The issue is that #header-index-inner is display: table-cell, and it is not stretching 100%.

The parent needs to be assigned display: table, as well as width 100%:

#header-index {    
    background-color: red;
    display: table;
    width: 100%;
}

#header-index-inner {   
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    height: 400px;
}

#inner-div{
  background-color:blue;
  width:100%;
}

Updated Fiddle

score 1 · Answer 3 · answered Jan 07 '16 at 21:58

Instead of changing the display to use tables and table cells, you can use positioning to center the inner div with:

#header-index {
  background-color: red;
}
#header-index-inner {
  width: 100%;
  height: 400px;
}
#inner-div {
  background-color: blue;
  top: 50%;
  position: relative;
  transform: translate(0%, -50%);
}

<header id="header-index">
  <div id="header-index-inner">
    <div id="inner-div">
      <h1>Header</h1>
      <h5>Subheader1 </h5>
      <h5>Subheader2 </h5>
    </div>
  </div>
</header>

How do I make this inner div stretch to 100 % width?

3 Answers3