Using padding top percentage, causing child div to push down

HTML & CSS
1

I have a section on my website which is the header at the top of the page.

This is how its set out

<div class="header-home header" id="home" style="background-image: url(/Images/Headers/CristalStandards-Header-Main.jpg); background-size: 100%; padding-top:46.88%;">
    <div class="jumbotron">
        <div id="homeWrapper">

            <h1 class="whiteText">Providers of Safety and Risk Management Solutions, globally</h1>

            <h2></h2>

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

The trouble I have is that #homeWrapper gets pushed right out of the div, when what I ideally need is that #homeWrapper sits in the center of the parent div with the padding-top percentage value.

This is what #homeWrapper currently looks like in CSS

.jumbotron h1 {
    font-size: 3.5em;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    line-height: 1.42857143;
}
#homeWrapper {
    position: relative;
    width: 65%;
    margin: auto;
}

So then as the screen resolution gets smaller, #homeWrapper always sits in the middle and also the font-size adapts in size too, is this possible?

2

Hi,

You will have to absolutely place the content on top of the padding in order to do this. It alsoe means you will need to ensure that you don;t have more text than can be contained in the height of your picture.

Here’s the easiest way to accomplish that although it does need an extra div due to an IE bug.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#home {
	background-color:red;
	background-image: url(/Images/Headers/CristalStandards-Header-Main.jpg);
	background-size: 100%;
	padding-top:46.88%;
	position:relative;
}
.jumbotron h1 {
	font-size: 2em;/* fallback*/
	font-size: 4vw;
	text-transform: uppercase;
	text-align: center;
	font-weight: 400;
	line-height: 1.42857143;
}
.jumbotron {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:65%;
	margin:auto;
}
.inner-jumbo{
	display:table;
	height:100%;
	width:100%;
}
#homeWrapper {
	display:table-cell;
	vertical-align:middle;
}
@media screen and (max-width:672px){
	.jumbotron{width:90%}
	.jumbotron h1{font-size:1.5rem;}
}
@media screen and (max-width:480px){
	.jumbotron{width:95%}
	.jumbotron h1{font-size:1.3rem;}
}
</style>
</head>

<body>
<div class="header-home header" id="home">
  <div class="jumbotron">
    <div class="inner-jumbo">
      <div id="homeWrapper">
        <h1 class="whiteText">Providers of Safety and Risk Management Solutions, globally</h1>
      </div>
    </div>
  </div>
</div>
</body>
</html>
2 Likes
3

Thank you PaulOB, absolutely spot on again.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.