Super Simple Left box Right box without floats

Author:
phil
Created:
Saturday, November 18th, 2017
Last Updated:
Monday, April 16th, 2018

Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service


Credit where credit is due: PaulOB @ www.sitepoint.com

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:960px;
	background:#f9f9f9;
	margin:auto;
	text-align:justify;
	width:100%;
	font-size:0.1px;/* Kill white-space*/
}
.box {
	display:inline-block;
	background:red;
	border:1px solid #000;
	padding:5px;
	vertical-align:top;
	font-size:16px;
	font-size:1rem;
}
.wrap:after{
	content:"";
	display:inline-block;
	height:1px;
	width:0;
	font-size:0;
	line-height:0;
	overflow:hidden;
	margin:0 100% 0 0;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="box"> Box on the left</div>
  <div class="box"> Box on the right</div>
</div>
</body>
</html>

Post Comment