I wonder if anyone can help. I'm trying to get 2 blocks of copy which will be acting as a title and a short description to sit under each other. They both have background colours set to them, however, when I try to move the lower paragraph section closer (with line-height) to the <h2>
it overlaps.
Here's what I have at the moment: https://jsfiddle.net/8L9mn70x/
.container {
position: relative;
width: 700px;
height: 400px;
background-color: #666;
}
.box {
position: absolute;
bottom: 0;
color: rgba(255, 255, 255, 1.00);
padding: 50px;
}
.box h2 {
display: inline-block;
font-size: 40px;
margin: 0;
padding: 15px 15px 0 15px;
background-color: rgba(0, 47, 95, 1.00)
}
.box p {
display: inline-block;
font-size: 16px;
padding: 15px;
margin: 0;
background-color: rgba(0, 47, 95, 1.00);
}
<div class="container">
<div class="box">
<h2>What do we do?</h2>
<p>No where else will you find this range of activities. From flying and gliding, to shooting and rock climbing, there is something for everyone!</p>
</div>
</div>
I want to move .box p
closer to the <h2>
, but continue with the additional background colour once it goes past the end of the <h2>
area.
The result I wish to achieve is shown here (spacing exaggerated):
Perhaps abosulte positioning and z-index's? I'm not sure. Any help would be appreciated.
Thanks!
the line-height
idea is the good one but you need also to reset vertical-align
to erase that gap underneath;
body {
padding:0;
margin:0;
}
.container {
position:relative;
width:700px;
height:400px;
background-color:#666;
}
.box {
position:absolute;
bottom:0;
color: rgba(255,255,255,1.00);
padding:50px;
}
.box h2 {
line-height:0.7em;
vertical-align:top;
display:inline-block;
font-size:40px;
margin:0;
padding:25px 15px 0 15px;/* increase padding-top ? */
background-color: rgba(0,47,95,1.00);
}
.box p {
display:inline-block;
font-size:16px;
padding:15px;
margin:0;
background-color: rgba(0,47,95,1.00);
}
<div class="container">
<div class="box">
<h2>What do we do?</h2>
<p>No where else will you find this range of activities. From flying and gliding, to shooting and rock climbing, there is something for everyone!</p>
</div>