Menu
There are 5 floated divs which heights are stretched to 100% of document height using Javascript. All 5 of them contain 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:
//sets columns height to 100%;
function colsHeight(){
var docHeight = $(document).height();
$("#wrapper div").height(docHeight);
};
$(document).ready(function(){
colsHeight();
});
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;
}
I've tried setting parent's div display: table and img display: table-cell, vertical-align: middle but no luck. Defining margin-top: 50% is acting anything but expected.
JSFIDDLE HERE!!!
Any help appreciated.
Thanks!
522
You could position them absolutely, then set top: 50% and margin-top: -63px. Of course, this only works if you know the height of the image (126px in your case). If the image sizes are dynamic, the easiest, but yucky way would be to set the margin-top on the images using js after they are loaded.
Anyway, the static method can be seen here: http://jsfiddle.net/3gqcS/2/
89
This feels a bit dirty, but you can set the div's line-height to div height + image height then overflow:hidden
<div id="static" style="height: 481px; line-height: 607px; overflow: hidden;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
