Adaptive pdf slides on html and css

HTML & CSS
9

Hi,

I still can’t work out what you want so I;ll just thow ideas out and perhaps some will be near the target :slight_smile:

It sounds like you want blocks of equal height and width and you can do that like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.block {
	width:50%;
	overflow:hidden;
	background:red;
	float:left;
}
.block2 {
	background:green
}
.block:before {
	content:" ";
	float:left;
	width:1px;
	margin-left:-1px;
	margin-top:100%;
}
.row {
	clear:both;
	padding:0 0 5px;
}
.row:after {
	content:" ";
	clear:both;
	display:block;
	height:0;
}
</style>
</head>

<body>
<div class="row">
		<div class="block">Block 1 </div>
		<div class="block block2">Block 2</div>
</div>
<div class="row">
		<div class="block">Block 1</div>
		<div class="block block2">Block 2</div>
</div>
</body>
</html>

Of course if your content doesn’t fit in those blocks then they will no longer be equal.

If you merely wanted equal height cells then use the display:table and display table-cell approach although the cell won’t be square as such.

If you are displaying fixed images then you can use the fixed aspect ratio method of percentage padding commonly used for videos.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.block {
	width:50%;
	padding-top:50%;
	overflow:hidden;
	background:red;
	float:left;
	margin:0 0 10px;
	position:relative;
}
.block2 {background:green}
.block>div{position:absolute;top:0;left:0;rigght:0;bottom:0}
</style>
</head>

<body>
		<div class="block"><div>Block 1</div> </div>
		<div class="block block2"><div>Block 2</div></div>
		<div class="block"><div>Block 1</div></div>
		<div class="block block2"><div>Block 2</div></div>
</body>
</html>

As I said I still can’t get a grip on what you are trying to do exactly.