asked on

CSS resposive divs inside container

I have a div that acts as a container.
.cont {
width:100%;
min-height:200px;
}
I have 10 boxes that will be inside of that container. so each box has a width of 20% so I can have two rows of 5.
.container-box {
width:20%;
float:left;
}
what do I add to the css to keep each of those boxes proportionate in height so they remain square? And so the text remains centered both vertically and horizontally?

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Not a pure css solution - uses some javascript but is responsive

<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.container {
	width: 100%;
}
.row {
	padding: 0;
	margin-left: -15px;
	margin-right: -15px;
}
.row:after {
	content: " ";
	float: none;
}
.col-lg-1 {
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	width: 20%;
	color: #fff;
	background: #ae883f;
	text-align: center;
}
.col-lg-1.b {
	background: #e883fa;
}
.col-lg-1.c {
	background: #883fae;
}
.col-lg-1.d {
	background: #83fae8;
}
.col-lg-1.e {
	background: #3fae88;
}
</style>

</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-lg-1 a">One</div>
		<div class="col-lg-1 b">Two</div>
		<div class="col-lg-1 c">Three</div>
		<div class="col-lg-1 d">Four</div>
		<div class="col-lg-1 e">Five</div>
	</div>
	<div class="row">
		<div class="col-lg-1 c">One</div>
		<div class="col-lg-1 d">Two</div>
		<div class="col-lg-1 e">Three</div>
		<div class="col-lg-1 b">Four</div>
		<div class="col-lg-1 a">Five</div>
	</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(function() {
	setHeight();
	$(window).resize(function() {
		setHeight();
	});
});
function setHeight()
{
	var width = $('.col-lg-1').width();
	$('.col-lg-1').height(width).css({lineHeight: width + 'px'});
}
</script>
</body>
</html>

Open in new window

Sample here http://www.marcorpsa.com/ee/t807.html