dante dante - 3 months ago 9
CSS Question

Child div overflows the parent div

I am trying to overflow a div over another, fitting 100% of the screen.

On my example I would like that the red bar where About Us is, to overflow the bordered div fitting 100% of the screen.

HTML:

<div id="wrapper">
<!-- header of the page -->
<header id="header">
<div class="container">
<div class="row">
<div class="col-xs-12 holder">
<!-- logo of the page -->
<a href="#" class="nav-opener visible-xs"><i class="fa fa-bars"></i></a>
<div class="nav-holder">
<!-- nav of the page -->
<nav id="nav">
<ul class="list-inline">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="quemsomos.html">About Us</a></li>
<li><a href="area-atuacao.html">Area</a></li>
<li><a href="servicos.html">Services</a></li>
<li><a href="contato.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- banner-block of the Page -->
<div class="banner-block">
<div class="container">
<div class="row row-about">
<div class="col-xs-12 banner-box">
<header class="banner-heading">
<h1>About Us</h1>
</header>
</div>
</div>
</div>
</div>
<!-- contain main informative part of the site -->
</div>


CSS:

.banner-block {
overflow: hidden;
position: relative;
}

.banner-block:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.banner-block:after {
z-index: -1;
background: rgba(0, 0, 0, .6);
}

.banner-block .bg-stretch {
z-index: -1;
}

.banner-block.centercenter-block {
text-align: center;
}

.banner-block.right-block {
text-align: right;
}

.banner-box {
height: 252px;
padding-top: 158px;
white-space: nowrap;
}

.banner-box .banner-heading {
display: inline-block;
white-space: normal;
vertical-align: middle;
}

.banner-box:before {
content: "";
vertical-align: middle;
display: inline-block;
height: 100%;
width: 1px;
overflow: hidden;
margin: 0 0 0 -5px;
}

.row-about {
background: red;
}
.banner-heading {
margin: 11px 0 0;
position: absolute;
}

.banner-heading h1 {
margin: -70px 120px 15px;
color: #fff;
text-transform: uppercase;
font-size: 36px;
line-height: 40px;
}
#wrapper {
position: relative;
overflow: hidden;
border: 1px solid black;
margin:20px;
}

#header {
bottom: auto;
z-index: 9999;
background: #fff;
}


http://jsfiddle.net/dempc3go

Answer

The red bar across the middle of the design you specified can be treated as an entirely separate element to the rest of the design. You can do something like this:

.red-tape {
  top: 50px;
  height: 80px;
  left: 0;
  right: 0;
  top: 70px;
  background-color: red;
  position: absolute;
}

.container {
  border: 1px solid black;
  height: 500px;
  width: 800px;
  margin: 0 auto;
  position: relative;
}

ul {
  float: right;
}

ul li {
  display: inline-block;
}

Codepen example