Dynamic header with child divs that fill screen?

Question

I've already asked this question, but in the wrong way. I should have told you guys what I wanted, and not how to fix my way of getting to it...

Basically I want a dynamic, fixed-height (150px) header that consists of an image (PNG with alpha channel) and a box on either side that stretch to the edge of the screen. The whole thing needs to be 50% transparent too.

I've tried this with divs to create the stretching boxes, having them and the image in a parent div, but never got them to adjust their width to reach the edge of the screen.

Here's a diagram: [---div---][---image---][---div---]

Anyone got any ideas?

score 0 · Answer 1 · edited May 23 '17 at 12:33

#header
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 150px;
  width: 100%;
  opacity: 0.5;
  background-color: gray;
  display: table;
}

#l
{
  background-color: red;
}

#r
{
  background-color: blue;
}

.headDiv
{
  
  height: 100%;
  width: 50%;
  vertical-align: middle;
  display: table-cell;
}

<head>
  <div id="header">
    <div class="headDiv" id="l"></div>
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" width=auto height=150px style="display:block">
    <div class="headDiv" id="r"></div>
  </div>
</head>

<body style="background-color:green; margin-top:160px;">
  Things in the body go here.
</body>

This is the working bar, with color-coded divs and a Japanese flag to represent the center. All credit goes to Marc Audet for his great display: table strategy for filling space.

Dynamic header with child divs that fill screen?

1 Answers1