Expand Outer DIV based on Inner DIVs

mark2 · September 17, 2019, 12:48pm

I am having a problem where my outer DIV ‘pagecontent’ is not increasing in height to match the space taken up by my inner DIVs ‘pageleft’ and ‘pageright’, which causes my footer DIV to appear at the top of the pagecontent DIV rather than underneath it. If I add a height to my pagecontent, say ‘Height:500px;’, it does move the footer div down the page, which is why I’m thinking the problem is with the pagecontent DIV not expanding it’s height based on the size of the pageleft and pageright DIVs.

Can anyone please advice me on what I need to change in my css to make the pagecontent DIV expand in height based on the pageleft or pageright DIVs.

CSS CODE:

.pagecontent {
display: block;
position: relative;
width: 100%;
height: auto;
z-align: 5;
}
.pageleft {
position: absolute;
top: 10px;
left: 10px;
background:white;
text-align: left;
font-size: 24px;
width:35%;
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-align: 5;
}
.pageright {
position: absolute;
bottom: 10px;
right: 24px;
border-radius: 20px;
width: 450px;
background: rgba(0, 0, 0, 0.7);
color: white;
text-align: left;
padding: 10px;
font-size: 20px;
font-weight: bold;
z-align: 5;
}
.footer {
width:100%;
height: 150px;
background-color: white;
display: block;
}

HTML CODE

div class=“pagecontent”
div class=“pageleft”
CONTENT OF LEFT BOX
/div
div class=“pageright”
CONTENT OF RIGHT BOX
/div
/div
div class=“footer”
CONTENT OF FOOTER
/div

adgoetz89 · September 17, 2019, 1:26pm

I’m not sure if I’m getting what you also have because the code is incomplete (on my end, the styling didn’t even work at all). Can you re-post the HTML and CSS in code blocks? There’s an option for it next to the quote button and picture button right above where you write your post.

mark2 · September 17, 2019, 2:07pm

My apologies, first time I’ve posted to a forum, and I wasn’t sure how to post code. I didn’t post the whole code of the page, but I’ll do that below. Thank you for your reply. You can view one of the pages I’m working on at: http://www.fespauk.com/services/training.php here it shows the white footer is at the top behind the “Text to go here” section, and its should be at the bottom of the page.

CSS Code

@charset "utf-8";
/* CSS Document */

/* FRONT PAGE START */

.logo {
	position: fixed;
	top: 40px;
	left: 40px;
	width: 387px; 
	height: 131px;
	display: block;
	Padding: 10px;
	background-color: white;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Navigation Start */

.navigation {
	position: fixed;
	top: 50%;
	width: 100%;
	height: 200px;
	text-align: center;
	opacity: 0.75;
	background-image: url("website_union_jack_blurred.png");
	background-repeat: no-repeat;
}
.navbox {
	float: left;
	width: 20%;
	text-align: center;
	display: inline-block;
	color: white;
	font-weight: bold;
	padding-top: 15px;
	opacity: 1;
}
.navboxedge {
	float: left;
	width: 10%;
	text-align: center;
	display: inline-block;
}
.navboxtitle {
	font-size: 22px;		
}
.navtitle1 {
  position: absolute;
  top: -300px;
  right: 100px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  align-z: 20;
  font-size: 60px;
  color: red;
}
.logoWrap1:hover .navtitle1 {
    opacity: 1;
}
.navtitle2 {
  position: absolute;
  top: -300px;
  right: 100px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  align-z: 20;
  font-size: 60px;
  color: red;
}
.logoWrap2:hover .navtitle2 {
    opacity: 1;
}
.navtitle3 {
  position: absolute;
  top: -300px;
  right: 100px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  align-z: 20;
  font-size: 60px;
  color: red;
}
.logoWrap3:hover .navtitle3 {
    opacity: 1;
}
.navtitle4 {
  position: absolute;
  top: -300px;
  right: 100px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  align-z: 20;
  font-size: 60px;
  color: red;
}
.logoWrap4:hover .navtitle4 {
    opacity: 1;
}

/* Navigation End */

/* Special Effects Start */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:0.75; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:0.75; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:0.75; } }

.fade-in {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.fade-in.two {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

/* Special Effects End */

/* Strapline Start */

#frontstrap {
	position: fixed;
	bottom: 30px;
	width: 100%; 
	display: block;
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 30px;
}

/* Strapline End */

/* FRONT PAGE END */


/* OTHER PAGES */

/* Top Navigation start */

*, *:before, *:after{
	padding: 0;
	margin: 0;
	z-index: 10;
} 
nav{
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
    position: fixed;
  	font-family: 'Lato', sans-serif;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.5);
    border: 1px solid rgba(0,0,0,.5);
	z-index: 15;
}
nav ul{
    list-style: none;
    position: relative;
    float: right;
    margin-right: 100px;
    display: inline-table;
	z-index: 15;
  }
nav ul li{
    float: left;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
nav ul li:hover{background: rgba(201, 225, 242,.75);}
nav ul li:hover > ul{display: block;}
nav ul li{
    float: left;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
nav ul li a{
    display: block; 
	position: relative;
    padding: 30px 10px;
    color: #222; 
    font-size: .9em;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
	z-index: 15;
}
nav ul ul{
    display: none;
    background: #fff;
    position: absolute; 
    top: 100%;
    box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.1);
	z-index: 15;
}
nav ul ul li{float: none; position: relative;}
nav ul ul li a {
    padding: 15px 10px; 
    border-bottom: 1px solid rgba(0,0,0,.05);
	z-index: 15;
}
nav ul ul ul {
	position: absolute; 
    left: 100%; 
    top:0;
	z-index: 15;
}
	
/*| Top Image |*/
.topofpage {
	display: block;
	position: relative;
	width: 100%;
	height: 100px;
	z-index: 15;
}

/* Top Navigation end */

/* Page Body Start */

.topimage {
	position: relative;
	top: -25px;
	Width: 100%;
	height: 90px;
	background-image: url("website_union_jack_blurred.png");
	background-repeat: no-repeat;
	padding:0;
    margin:0;
    border: 1px solid rgba(0,0,0,.5);
	overflow: hidden;
	z-index: 5;
}
.toptext {
  	display: table;
	position: relative;
	top: 10px;
  	margin: 0 auto;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 400%;
    font-weight: 700;
    color: white;
  	/* text-shadow: 0 1px 0 #ccc,
              	 0 2px 0 #c9c9c9,
              	 0 3px 0 #bbb,
               	 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15); */
}
.pagecontent {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	z-align: 5;
}
.pageleft {
	position: absolute;
	top: 10px;
	left: 10px;
    background:white; 
	text-align: left;
	font-size: 24px;
    width:35%;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-align: 5;
}
.pageright {
	position: absolute;
	bottom: 10px;
	right: 24px;
	border-radius: 20px;
	width: 450px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	text-align: left;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	z-align: 5;
}

/* Page Body Ends */

/* Page Footer Start */

.fa {
  padding: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}
.fa:hover {
    opacity: 0.7;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.footer {
	width:100%;
	height: 150px;
	background-color: white;
	display: block;
}
	
.leftfooter { 
	float: left;
	display: inline-block;
    background: white;
}
	.fespaltd {width: 150px; text-align: left;}
	.address {width: 475px; text-align: left;}
	.social {width: 275px; text-align: left;}
	.emailfooter {font-size: 30px; text-decoration: none; color: black;}
	.links {width: 200px; height: 100px; position: inline-block;}

/* Page Footer Ends */

/* OTHER PAGES END */

HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
<!--
body {
	padding:0;
    margin:0;
	background: url(background_taxcredits.jpg) no-repeat center center fixed;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link href="../fespauk2019.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include('../include/2019_header.php'); ?>
<div class="topimage">
	<span class="toptext" align="center">Training</span>
</div>
<div class="pagecontent">
		<div class="pageleft">
   			<p>Text to go here.</p>
		</div>
		<div class="pageright">
			&quot;Quote.&quot; - Company
  </div>
</div>
<div class="footer">
  <div class="leftfooter fespaltd"><img src="http://www.fespauk.com/app/images/fespa-member-19.png" width="120" height="150" align="left" alt=""/></div>
	<div class="leftfooter address"><br><br>
    FESPA UK Association, Innovation Way, Barnsley, S75 1JL
    <br />
    Copyright 2019 FESPA UK Association (unless otherwise stated)
    <br />
    Company number: 00475170 | VAT number: GB 232 5947 58
    <br />
  	Click to read our: Cookie Policy & Privacy Policy
	</div>
	<div class="leftfooter social"><br>
        <a href="mailto:info@fespauk.com" class="emailfooter">info@fespauk.com</a><br><br>
		<a href="https://twitter.com/fespauk" class="fa fa-twitter"></a>
		<a href="https://www.youtube.com/user/fespaukassociation" class="fa fa-youtube"></a>
		<a href="https://www.instagram.com/fespauk/" class="fa fa-instagram"></a>
		<a href="https://www.linkedin.com/company/fespa-uk-association" class="fa fa-linkedin"></a>
	</div>
	<div class="leftfooter links"><br><br>
    <img src="http://www.fespauk.com/images-adverts/advert_augustus.gif" width="190" height="100" boarder="0" alt="Augustus Martin">
	</div>
	<div class="leftfooter links"><br><br>
	<img src="http://www.fespauk.com/images-adverts/advert_theprintingcharity.png" width="190" height="38" boarder="0" alt="The Printing Charity" style="padding-top: 31px;">
	</div>
</div>
</body>
</html>

lasjorg · September 17, 2019, 2:49pm

The .pagecontent element is both collapsed and has no real content. If you add overflow: hidden; to it, it will contain its content (or better yet use a clearfix class). If you add height: 100vh; to it as well, it will “simulate” it having some content to push down the footer.

I would not really suggest using floats for layout, look into Flexbox and CSS Grid instead. If you do have to use floats you need to know about the issues and workarounds.

nickjohnsondev · September 17, 2019, 2:55pm

The problem seems to be cause by .pageleft and .pageright having absolute positioning. It prevents .pagecontent from calculating the height appropriately.

Either try removing the absolute positioning from the divs and achieve the desired functionality another way, or
try to set the footer’s position to ‘absolute’, along with setting bottom: 0, right: 0, left: 0.
Hope it helps. (not sure it will work with a long page)

lasjorg · September 17, 2019, 3:28pm

True, I didn’t really notice that.

But .pagecontent should be able to contain the absolute positioned elements. It just has no height (it is collapsed). You can also set height: 100%; on the html, body and .pagecontent and then change the height on the .pageleft element (giving it 100% will still overflow), or set the top/bottom properties to 0.