lmccart/05_layout.html

## 05_layout.html
/////////////////// 01_WIDTH UNITS

<!DOCTYPE html>
<html>
  <head>
    <title>CSS layout</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</p>
  </body>
</html>

p {
  font-size: 12px;
  width: 400px;
  /* width: 50%; */
  /* width: 5em; */
}

/////////////////// 02_BOX MODEL

<!DOCTYPE html>
<html>
  <head>
    <title>CSS layout</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>
    <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</div>

    <div id="colorblock"></div>
  </body>
</html>

#text {
  width: 400px;
  padding: 20px;
  border: 6px solid #949599;
  margin: 20px;
  /* height: 100px; */
  /* overflow: hidden; */
}

#colorblock {
  background: red;
  width: 150px;
  height: 100px;
  padding: 50px;
  border: 20px solid blue;
  margin: 10px;
}


/////////////////// 03_MARGIN_PADDING_DECLARATIONS

#text {
  width: 400px;
  background: aqua;
  padding: 0px 50px 100px 200px;
  margin: 0px 50px;
}

#colorblock {
  background: red;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-left: 500px;
}

/////////////////// 04_BLOCK_INLINE

<!DOCTYPE html>
<html>
  <head>
    <title>CSS layout</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam.</div>

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. <span>Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu.</span> Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</div>
  </body>
</html>

div {
  display: block;
}

span {
  display: block;
  /* display: inline; */
  background: aqua;
}

/////////////////// 05_FLOAT

<!DOCTYPE html>
<html>
  <head>
    <title>CSS layout</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>
    <img src="sprinkler.jpg">

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. <span>Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu.</span> Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus. Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis. Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar. Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc. Nam maximus lobortis felis, vel porttitor neque consectetur eget. Nam nec volutpat diam. Nam consectetur metus in enim tincidunt, nec suscipit nunc gravida. Fusce ut consectetur massa. Nunc sit amet orci massa. Donec venenatis pellentesque ullamcorper. Aliquam erat volutpat. Donec iaculis consequat aliquet. Mauris a aliquam mi. Aliquam ultricies lacus elit. Phasellus posuere varius nibh, sed sollicitudin neque tristique vitae. Morbi euismod posuere volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus metus diam, aliquet dignissim fringilla eget, porttitor non lacus. Proin tincidunt vehicula sodales. Curabitur vulputate lacus odio, in cursus magna varius ut. Integer ut felis enim. Vestibulum id nunc vulputate lorem egestas convallis. Donec quis est ut lectus lacinia maximus. Suspendisse semper ornare lectus ac pulvinar.

</div>
  </body>
</html>

/* doesn't work, text aligns with bottom of the image
img {
  display: inline;
}

div {
  display: inline;
}*/


img {
  float: left;
  /* float: right; */
  margin-right: 20px;
}


/////////////////// 06_2_COLUMN

<!DOCTYPE html>
<html>
  <head>
    <title>CSS layout</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>
    <div id="text1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus. Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis. Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar.
    </div>

    <div id="text2">
      Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc. Nam maximus lobortis felis, vel porttitor neque consectetur eget. Nam nec volutpat diam. Nam consectetur metus in enim tincidunt, nec suscipit nunc gravida. Fusce ut consectetur massa. Nunc sit amet orci massa. Donec venenatis pellentesque ullamcorper. Aliquam erat volutpat. Donec iaculis consequat aliquet. Mauris a aliquam mi. Aliquam ultricies lacus elit. Phasellus posuere varius nibh, sed sollicitudin neque tristique vitae. Morbi euismod posuere volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus metus diam, aliquet dignissim fringilla eget, porttitor non lacus. Proin tincidunt vehicula sodales. Curabitur vulputate lacus odio, in cursus magna varius ut. Integer ut felis enim. Vestibulum id nunc vulputate lorem egestas convallis. Donec quis est ut lectus lacinia maximus. Suspendisse semper ornare lectus ac pulvinar.
    </div>
  </body>
</html>

div {
  background: hotpink;
  float: left;
  width: 50%;
}


/* this is a way to add middle separation

div {
  background: hotpink;
  width: 48%;
}

#text1 {
  float: left;
}

#text2 {
  float: right;
}*/


/////////////////// 07_HEADER_FOOTER


header {
  font-size: 3em;
  text-align: center;
}

footer {
  text-align: center;
  font-size: 2em;
  background: aqua;
  clear: both;
}

/////////////////// 08_3_COLUMN

div {
  width: 30%;
  margin-right: 5%;
  float: left;
}

.last-div {
  margin-right: 0;
}


/////////////////// 09_POSITION_ABSOLUTE

<!DOCTYPE html>
<html>
  <head>
    <title>CSS layout</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>

    <div id="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</div>

    <div id="text2">Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis.</div>

    <div id="text3">Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar. Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc.</div>

</div>
  </body>
</html>

div {
  margin: 20px;
  background: yellow;
  width: 400px;
}

#text2 {
  position: absolute;
  top: 0px;
  left: 100px;
  background: orange;
}


/////////////////// 10_POSITION_RELATIVE

div {
  margin: 20px;
  background: yellow;
  width: 400px;
}

#text2 {
  background: orange;
  position: relative;
  top: 50px;
  left: 50px;
}


/////////////////// 11_POSITION_ABSOLUTE2

// add section

section {
  background: aqua;
  position: absolute;
  top: 50px;
  left: 500px;
}

div {
  margin: 20px;
  background: yellow;
  width: 400px;
}

#text2 {
  position: absolute;
  top: 0px;
  left: 100px;
  background: orange;
}

/////////////////// 12_POSITION_RELATIVE2

same thing
	/////////////////// 01_WIDTH UNITS

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS layout</title>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</p>
	</body>
	</html>

	p {
	font-size: 12px;
	width: 400px;
	/* width: 50%; */
	/* width: 5em; */
	}

	/////////////////// 02_BOX MODEL

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS layout</title>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</div>

	<div id="colorblock"></div>
	</body>
	</html>

	#text {
	width: 400px;
	padding: 20px;
	border: 6px solid #949599;
	margin: 20px;
	/* height: 100px; */
	/* overflow: hidden; */
	}

	#colorblock {
	background: red;
	width: 150px;
	height: 100px;
	padding: 50px;
	border: 20px solid blue;
	margin: 10px;
	}


	/////////////////// 03_MARGIN_PADDING_DECLARATIONS

	#text {
	width: 400px;
	background: aqua;
	padding: 0px 50px 100px 200px;
	margin: 0px 50px;
	}

	#colorblock {
	background: red;
	width: 100px;
	height: 100px;
	margin-top: 50px;
	margin-left: 500px;
	}

	/////////////////// 04_BLOCK_INLINE

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS layout</title>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam.</div>

	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. <span>Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu.</span> Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</div>
	</body>
	</html>

	div {
	display: block;
	}

	span {
	display: block;
	/* display: inline; */
	background: aqua;
	}

	/////////////////// 05_FLOAT

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS layout</title>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<img src="sprinkler.jpg">

	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. <span>Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu.</span> Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus. Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis. Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar. Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc. Nam maximus lobortis felis, vel porttitor neque consectetur eget. Nam nec volutpat diam. Nam consectetur metus in enim tincidunt, nec suscipit nunc gravida. Fusce ut consectetur massa. Nunc sit amet orci massa. Donec venenatis pellentesque ullamcorper. Aliquam erat volutpat. Donec iaculis consequat aliquet. Mauris a aliquam mi. Aliquam ultricies lacus elit. Phasellus posuere varius nibh, sed sollicitudin neque tristique vitae. Morbi euismod posuere volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus metus diam, aliquet dignissim fringilla eget, porttitor non lacus. Proin tincidunt vehicula sodales. Curabitur vulputate lacus odio, in cursus magna varius ut. Integer ut felis enim. Vestibulum id nunc vulputate lorem egestas convallis. Donec quis est ut lectus lacinia maximus. Suspendisse semper ornare lectus ac pulvinar.

	</div>
	</body>
	</html>

	/* doesn't work, text aligns with bottom of the image
	img {
	display: inline;
	}

	div {
	display: inline;
	}*/


	img {
	float: left;
	/* float: right; */
	margin-right: 20px;
	}


	/////////////////// 06_2_COLUMN

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS layout</title>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<div id="text1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus. Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis. Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar.
	</div>

	<div id="text2">
	Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc. Nam maximus lobortis felis, vel porttitor neque consectetur eget. Nam nec volutpat diam. Nam consectetur metus in enim tincidunt, nec suscipit nunc gravida. Fusce ut consectetur massa. Nunc sit amet orci massa. Donec venenatis pellentesque ullamcorper. Aliquam erat volutpat. Donec iaculis consequat aliquet. Mauris a aliquam mi. Aliquam ultricies lacus elit. Phasellus posuere varius nibh, sed sollicitudin neque tristique vitae. Morbi euismod posuere volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus metus diam, aliquet dignissim fringilla eget, porttitor non lacus. Proin tincidunt vehicula sodales. Curabitur vulputate lacus odio, in cursus magna varius ut. Integer ut felis enim. Vestibulum id nunc vulputate lorem egestas convallis. Donec quis est ut lectus lacinia maximus. Suspendisse semper ornare lectus ac pulvinar.
	</div>
	</body>
	</html>

	div {
	background: hotpink;
	float: left;
	width: 50%;
	}


	/* this is a way to add middle separation

	div {
	background: hotpink;
	width: 48%;
	}

	#text1 {
	float: left;
	}

	#text2 {
	float: right;
	}*/


	/////////////////// 07_HEADER_FOOTER


	header {
	font-size: 3em;
	text-align: center;
	}

	footer {
	text-align: center;
	font-size: 2em;
	background: aqua;
	clear: both;
	}

	/////////////////// 08_3_COLUMN

	div {
	width: 30%;
	margin-right: 5%;
	float: left;
	}

	.last-div {
	margin-right: 0;
	}


	/////////////////// 09_POSITION_ABSOLUTE

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS layout</title>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>

	<div id="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Sed lectus arcu, sodales vitae mollis nec, luctus nec arcu. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus.</div>

	<div id="text2">Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis.</div>

	<div id="text3">Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar. Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc.</div>

	</div>
	</body>
	</html>

	div {
	margin: 20px;
	background: yellow;
	width: 400px;
	}

	#text2 {
	position: absolute;
	top: 0px;
	left: 100px;
	background: orange;
	}


	/////////////////// 10_POSITION_RELATIVE

	div {
	margin: 20px;
	background: yellow;
	width: 400px;
	}

	#text2 {
	background: orange;
	position: relative;
	top: 50px;
	left: 50px;
	}



	/////////////////// 11_POSITION_ABSOLUTE2

	// add section

	section {
	background: aqua;
	position: absolute;
	top: 50px;
	left: 500px;
	}

	div {
	margin: 20px;
	background: yellow;
	width: 400px;
	}

	#text2 {
	position: absolute;
	top: 0px;
	left: 100px;
	background: orange;
	}

	/////////////////// 12_POSITION_RELATIVE2

	same thing