There are 5 floated divs with heights stretched to 100% of the document height using JavaScript. Each of the 5 divs contains an img element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
<div id="static"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div class="clear"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
</div>
</body>
</html>
Javascript:
// Adjusts columns height to fit 100% of the document;
function adjustColumnHeight(){
var docHeight = $(document).height();
$("#wrapper div").height(docHeight);
};
$(document).ready(function(){
adjustColumnHeight();
});
and CSS:
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 1000px;
margin: 0 auto;
}
#wrapper div{
padding: 0 20px;
background-color: #9F81F7;
float: left;
border-right: 1px solid black;
}
#wrapper img{
}
div.clear:after{
content: " ";
clear: both;
}
Tried setting the parent div to display: table and the img to
display: table-cell, vertical-align: middlemargin-top: 50% didn't yield the expected results.
Any assistance would be greatly appreciated.
Thank you!