Baptiste Arnaud Baptiste Arnaud - 6 months ago 12
CSS Question

Size of a div that contains an image and 2 other divs

My HTML:

<div class="container-fluid">
<div class="row">
<div class="header-img">
<img src="test_bg.jpg" class="bg" />
<div class="col-xs-2 col-xs-offset-1 logo"></div>
<div class="col-xs-5 col-xs-offset-3 logo"></div>
</div>
</div>




CSS:

$test-color : red;

.header-img {
width: 100%;
height: auto;
}

.bg {
width: 100%;
height: auto;
display: block;

}

.logo {
background-color: $test-color;
position: absolute;
height: 100px;
z-index: 2;
}


Here is the result:

enter image description here

What i want:

The header div has the size of the image it contains and the two other divs are on the image at the top of it.

The problem is, if I make the img absolute the two divs are on top but the header div hasn't the size of the image.

Is it possible to have both?

Answer

Why not just wrap the red divs with container with position:absolute?

Like this?

.header-img {
  width: 100%;
  height: auto;
}

.bg {
  width: 100%;
  height: auto;
  display: block;

}

.s {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

.logo {
  background-color: red;
  position: absolute;
  height: 100px;
  z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="header-img">
      <img src="http://i.stack.imgur.com/6MqG7.jpg" class="bg" />
      <div class="s">
        <div class="col-xs-2 col-xs-offset-1 logo"></div>
        <div class="col-xs-5 col-xs-offset-3 logo"></div>
      </div>
    </div>
  </div>
</div>

Comments