lajlev/responsive-2col-simple.html

## responsive-2col-simple.html
<!DOCTYPE HTML>
<!-- Based on http://webdesignerwall.com/tutorials/responsive-design-in-3-steps -->
<html lang="en-US">
<head>
  <meta charset="UTF-8">

  <!-- Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Responsive-2col-simple</title>

  <style type="text/css">

.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.wrap {
  margin: 0 auto;
  width: 960px;
  background: #aaa;
}

body {
  background: #f8f8f8; }

header {
  background: #ccc;
  height: 180px; }

#content {
  background: #ccc;
  float: left;
  width: 600px; }

#sidebar {
  background: #ccc;
  float: right;
  width: 300px; }

footer {
  background: #ccc; }


@media screen and (max-width:980px) {
  .wrap {
    width: 94%; }

  #content {
    width: 65%; }

  #sidebar {
    width: 30%;
  }
}

@media screen and (max-width:700px) {
  #content {
    float: none;
    width: auto; }

  #sidebar {
    float: none;
    width: auto;
  }
}

@media screen and (max-width:480px) {
  h1 {
    font-size: 24px; }

  header {
    height: auto; }

  #sidebar {
    display: none;
  }
}

  </style>
</head>
<body>
  <header>
    <div class="wrap">
      <h1>Header</h1>
    </div>
  </header>

  <div class="wrap cf">
    <section id="content">
      <h2>Content</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin lacinia nisi, eu ultricies mauris aliquam id. Suspendisse convallis convallis varius. Aenean augue justo, iaculis blandit cursus in, adipiscing in elit. Maecenas dignissim cursus ligula eget elementum. Donec consequat dictum nulla nec fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lorem mi, hendrerit ut accumsan ut, dictum ac augue. Phasellus adipiscing, ligula id laoreet dictum, quam dui lacinia est, nec venenatis nulla sem interdum ligula. Proin sem justo, vehicula a commodo in, facilisis auctor quam. Ut faucibus nunc ut mi mattis vitae iaculis enim placerat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin lacinia nisi, eu ultricies mauris aliquam id. Suspendisse convallis convallis varius. Aenean augue justo, iaculis blandit cursus in, adipiscing in elit. Maecenas dignissim cursus ligula eget elementum. Donec consequat dictum nulla nec fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lorem mi, hendrerit ut accumsan ut, dictum ac augue. Phasellus adipiscing, ligula id laoreet dictum, quam dui lacinia est, nec venenatis nulla sem interdum ligula. Proin sem justo, vehicula a commodo in, facilisis auctor quam. Ut faucibus nunc ut mi mattis vitae iaculis enim placerat.
      </p>
    </section>

    <aside id="sidebar">
      <h2>Sidebar</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin lacinia nisi, eu ultricies mauris aliquam id. Suspendisse convallis convallis varius. Aenean augue justo, iaculis blandit cursus in, adipiscing in elit. Maecenas dignissim cursus ligula eget elementum. Donec consequat dictum nulla nec fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lorem mi, hendrerit ut accumsan ut, dictum ac augue. Phasellus adipiscing, ligula id laoreet dictum, quam dui lacinia est, nec venenatis nulla sem interdum ligula. Proin sem justo, vehicula a commodo in, facilisis auctor quam. Ut faucibus nunc ut mi mattis vitae iaculis enim placerat.
      </p>
    </aside>

  </div>


  <footer>
    <div class="wrap">
      <h2>Footer</h2>
    </div>
  </footer>
</body>
</html>
	<!DOCTYPE HTML>
	<!-- Based on http://webdesignerwall.com/tutorials/responsive-design-in-3-steps -->
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">

	<!-- Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Responsive-2col-simple</title>

	<style type="text/css">

	.cf:before, .cf:after {
	content:"";
	display:table;
	}

	.cf:after {
	clear:both;
	}

	.wrap {
	margin: 0 auto;
	width: 960px;
	background: #aaa;
	}

	body {
	background: #f8f8f8; }

	header {
	background: #ccc;
	height: 180px; }

	#content {
	background: #ccc;
	float: left;
	width: 600px; }

	#sidebar {
	background: #ccc;
	float: right;
	width: 300px; }

	footer {
	background: #ccc; }


	@media screen and (max-width:980px) {
	.wrap {
	width: 94%; }

	#content {
	width: 65%; }

	#sidebar {
	width: 30%;
	}
	}

	@media screen and (max-width:700px) {
	#content {
	float: none;
	width: auto; }

	#sidebar {
	float: none;
	width: auto;
	}
	}

	@media screen and (max-width:480px) {
	h1 {
	font-size: 24px; }

	header {
	height: auto; }

	#sidebar {
	display: none;
	}
	}

	</style>
	</head>
	<body>
	<header>
	<div class="wrap">
	<h1>Header</h1>
	</div>
	</header>

	<div class="wrap cf">
	<section id="content">
	<h2>Content</h2>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin lacinia nisi, eu ultricies mauris aliquam id. Suspendisse convallis convallis varius. Aenean augue justo, iaculis blandit cursus in, adipiscing in elit. Maecenas dignissim cursus ligula eget elementum. Donec consequat dictum nulla nec fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lorem mi, hendrerit ut accumsan ut, dictum ac augue. Phasellus adipiscing, ligula id laoreet dictum, quam dui lacinia est, nec venenatis nulla sem interdum ligula. Proin sem justo, vehicula a commodo in, facilisis auctor quam. Ut faucibus nunc ut mi mattis vitae iaculis enim placerat.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin lacinia nisi, eu ultricies mauris aliquam id. Suspendisse convallis convallis varius. Aenean augue justo, iaculis blandit cursus in, adipiscing in elit. Maecenas dignissim cursus ligula eget elementum. Donec consequat dictum nulla nec fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lorem mi, hendrerit ut accumsan ut, dictum ac augue. Phasellus adipiscing, ligula id laoreet dictum, quam dui lacinia est, nec venenatis nulla sem interdum ligula. Proin sem justo, vehicula a commodo in, facilisis auctor quam. Ut faucibus nunc ut mi mattis vitae iaculis enim placerat.
	</p>
	</section>

	<aside id="sidebar">
	<h2>Sidebar</h2>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin lacinia nisi, eu ultricies mauris aliquam id. Suspendisse convallis convallis varius. Aenean augue justo, iaculis blandit cursus in, adipiscing in elit. Maecenas dignissim cursus ligula eget elementum. Donec consequat dictum nulla nec fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lorem mi, hendrerit ut accumsan ut, dictum ac augue. Phasellus adipiscing, ligula id laoreet dictum, quam dui lacinia est, nec venenatis nulla sem interdum ligula. Proin sem justo, vehicula a commodo in, facilisis auctor quam. Ut faucibus nunc ut mi mattis vitae iaculis enim placerat.
	</p>
	</aside>

	</div>


	<footer>
	<div class="wrap">
	<h2>Footer</h2>
	</div>
	</footer>
	</body>
	</html>