umerata
8/11/2017 - 10:39 AM

Width Playgrounds | label-html

Width Playgrounds

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>Testing Page</title>
	
	<!-- Normalize.css -->
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/6.0.0/normalize.css">

	<!--
	// Optional Bootstrap
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -
	-->

	<!-- Your Css -->
	<style>
		html{
			padding:50px;
		}
		body{
			/*padding:50px;*/
		    font-family: sans-serif;
		}

		h2{
			width:100%;
			float:left;
			clear:both;
		}

		.equal-boxes-container{
			width:100%;
			background-color:pink;
			float:left;
			clear:both;
		}		

		.box-outer{
			display:table;
			table-layout: fixed;
			border:1px solid black;
			float:left;
			box-sizing:border-box;
			height:100px;
			background-color:red;
			padding:30px;
			height:100%;
		}

		.box-contents{
			display:table-cell;
			vertical-align: middle;
			background-color:blue;
			color:#fff;

		}

		.box-2{
			width:calc(100% / 2);
		}

		.box-3{
			width:calc(100% / 3);
		}

		.box-4{
			width:calc(100% / 4);
		}

		.box-5{
			width:calc(100% / 5);
		}


		.seperated-boxes{
			width:100%;
			float:left;
			clear:both;
		}



		.cont-width-3{
			width: calc(100% + 20px);
			margin-left:-10px;
			background-color:transparent;
		}
		.seperated-boxes .sw-3{
			float:left;
			width: calc(100% / 3 - 20px);
			margin:10px;
			height:30px;
			background-color:pink;
		}


		.cont-width-2{
			width: calc(100% + 20px);
			margin-left:-10px;
			background-color:transparent;
		}
		.seperated-boxes .sw-2{
			float:left;
			width: calc(100% / 2 - 20px);
			margin:10px;
			height:30px;
			background-color:pink;
		}

		.cont-width-3{
			width: calc(100% + 20px);
			margin-left:-10px;
			background-color:transparent;
		}
		.seperated-boxes .sw-3{
			float:left;
			width: calc(100% / 3 - 20px);
			margin:10px;
			height:30px;
			background-color:pink;
		}

		.cont-width-4{
			width: calc(100% + 20px);
			margin-left:-10px;
			background-color:transparent;
		}
		.seperated-boxes .sw-4{
			float:left;
			width: calc(100% / 4 - 20px);
			margin:10px;
			height:30px;
			background-color:pink;
		}


		.cont-width-5{
			width: calc(100% + 20px);
			margin-left:-10px;
			background-color:transparent;
		}
		.seperated-boxes .sw-5{
			float:left;
			width: calc(100% / 5 - 20px);
			margin:10px;
			height:30px;
			background-color:pink;
		}


		/* Auto width and gutters seperated boxes*/

		.sw-auto-boxes{
			float:left;
			clear:both;
		}

		.sw-n{
			background-color:pink;
			float:left;
		}
	</style>
</head>
<body>

	<h1>Equally Divided Blocks by Width</h1>

	<h2>Fixed widths</h2>

	<div class='equal-boxes-container'>
		<div class='box-2 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, repudiandae.
			</div>
		</div>
		<div class='box-2 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, illo?
			</div>
		</div>
	</div>

	<div class='equal-boxes-container'>
		<div class='box-3 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, mollitia.
			</div>
		</div>
		<div class='box-3 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, quos.
			</div>
		</div>
		<div class='box-3 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, aliquid.
			</div>
		</div>
	</div>


	<div class='equal-boxes-container'>
		<div class='box-4 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, quos.
			</div>
		</div>
		<div class='box-4 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tempora?
			</div>
		</div>
		<div class='box-4 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, temporibus.
			</div>
		</div>
		<div class='box-4 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, ratione.
			</div>
		</div>
	</div>

	<div class='equal-boxes-container'>
		<div class='box-5 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, soluta.
			</div>
		</div>
		<div class='box-5 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, fuga!
			</div>
		</div>
		<div class='box-5 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet.
			</div>
		</div>
		<div class='box-5 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, nobis?
			</div>
		</div>
		<div class='box-5 box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
			</div>
		</div>
	</div>


	<h2>Dynamic widths (using jquery)</h2>
	

	<div class='equal-boxes-container auto-width'>
		<div class='box-n box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
			</div>
		</div>
		<div class='box-n box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
			</div>
		</div>
		<div class='box-n box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
			</div>
		</div>
		<div class='box-n box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
			</div>
		</div>
		<div class='box-n box-outer'>
			<div class="box-contents">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
			</div>
		</div>
	</div>


	<h2>Seperated fixed width boxes</h2>

	<div class="seperated-boxes cont-width-2">
		<div class="sw-2">data</div>
		<div class="sw-2">data</div>
	</div>

	<div class="seperated-boxes cont-width-3">
		<div class="sw-3">data</div>
		<div class="sw-3">data</div>
		<div class="sw-3">data</div>
	</div>


	<div class="seperated-boxes cont-width-4">
		<div class="sw-4">data</div>
		<div class="sw-4">data</div>
		<div class="sw-4">data</div>
		<div class="sw-4">data</div>
	</div>

	<div class="seperated-boxes cont-width-5">
		<div class="sw-5">data</div>
		<div class="sw-5">data</div>
		<div class="sw-5">data</div>
		<div class="sw-5">data</div>
		<div class="sw-5">data</div>
	</div>


	<h2>Seperated auto width boxes with (using jquery)</h2>

	<div class="sw-auto-boxes" data-gutters='10'>
		<div class="sw-n">data</div>
		<div class="sw-n">data</div>
		<div class="sw-n">data</div>
		<div class="sw-n">data</div>
	</div>
	
	

	
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
	<!-- 
	// Optional Bootstrap	
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>	
	-->
	<script>
		$(document).ready(function(){
			console.log('test running');


			$('.sw-auto-boxes').each(function(){
				var margin = parseInt($(this).attr('data-gutters'));
				var boxes = $(this).find('.sw-n');
				
				$(boxes).each(function(){
					$(this).css({
						'width':'calc(100% / '+boxes.length+' - '+ (margin*2) + 'px )',
						'margin':'0 '+margin+'px'
					});
				})

				$(this).css({
					'width':'calc(100% + '+ (margin*2) + 'px )',
					'margin-left': '-'+margin+'px'
				});
			})

			//  Give width automatically depending on number of boxes

			$('.auto-width').each(function(){
				var boxes = $(this).find('.box-n');
				$(boxes).each(function(){
					$(this).css('width','calc(100% / '+boxes.length+')');
				})
			});

			//  Matching Heights of elements
			var matchHeights = [
			{
				selector:'.box-4',
				maxHeight:0,
			},
			{
				selector:'.box-5',
				maxHeight:0,
			},
			{
				selector:'.box-3',
				maxHeight:0,
			}];

			$(matchHeights).each(function(index,item){
				$(item.selector).each(function(){
					if ($(this).height() > item.maxHeight) { item.maxHeight = $(this).height(); }
				});
				$(item.selector).height(item.maxHeight);
			})

		})

	</script>
</body>
</html>