Class 3 – Solution to In-Class Assignment #3

Posted: February 21st, 2009 | Author: | Filed under: assignments, css, xhtml | Tags: | No Comments »

Here is my solution to the advanced float/clear in-class assignment.  This example takes advantage of the CSS “float” and “clear” properties to create a layout of rows of boxes.

The files necessary for this example are:

  1. assignment2.html – the XHTML code
  2. styles/assignment2.css – the CSS code

Here is the code for assignment2.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Class 2 - In-class Assignment #2</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!-- put a any CSS style sheet or JavaScript code here -->
	<link rel="stylesheet" type="text/css" href="styles/assignment2.css" />
  </head>
  <body>
	<h1>Class 2 - In-class Assignment #2</h1>

	<div id="container">

		<!-- BEGIN FIRST ROW OF BOXES -->
		<div class="box green_box"></div>
		<div class="box blue_box"></div>
		<div class="box green_box"></div>
		<div class="clear"></div>
		<!-- BEGIN FIRST ROW OF BOXES -->

		<!-- BEGIN THE PARAGRAPH -->
		<p id="blue_p">
			Phasellus commodo nibh eu ante egestas sodales. Integer malesuada. Ut quam nibh, imperdiet non, malesuada sed, cursus sit amet, ligula. Cras id est quis lectus tincidunt vulputate. Nullam magna erat, ultrices vitae, suscipit vel, placerat vitae, quam. Suspendisse potenti. Pellentesque et neque ut nulla fermentum pellentesque. Pellentesque mollis velit eu nisl. Maecenas ipsum. Sed sagittis erat id dolor. Nulla et ligula. Maecenas at purus eget libero ultricies egestas. Donec condimentum, justo ac semper vestibulum, dui justo porta felis, non auctor sem enim eget est. Ut nisl erat, viverra id, sollicitudin at, porttitor sed, felis. Maecenas sed odio non massa viverra euismod. Praesent turpis urna, lobortis eget, lobortis vel, suscipit sed, massa. Curabitur tincidunt. Aliquam elementum, justo a viverra sagittis, neque lacus molestie elit, quis condimentum augue quam feugiat nulla.
		</p>
		<!-- END THE PARAGRAPH -->

		<!-- BEGIN SECOND ROW OF BOXES -->
		<div class="box red_box"></div>
		<div class="box red_box"></div>
		<div class="box red_box"></div>
		<div class="clear"></div>
		<!-- END SECOND ROW OF BOXES -->

	</div><!-- //end of div id="container" -->

  </body>
</html>

And here is the code for styles/assignment2.css:

body {
	/* this is a hack to get IE6 to center the main div on the page */
	text-align: center;
}

div#container {
	margin: 0 auto;	/* this is how you center an element in relation to its parent element */
	width: 370px;
	border: 1px solid gray;
	background-color: #c0c0c0;
	padding: 10px;
}

div.box {
	float: left; /* this stacks up all the boxes side by side, starting all the way to the left */
	width: 100px;
	height: 100px;
	margin: 10px;
	border: 1px solid gray;
}

div.clear {
	clear: both; /* this creates a sort of line-break at the end of a row of floating elements */
}

div.green_box {
	background-color: green;
}
div.blue_box {
	background-color: blue;
}
div.red_box {
	background-color: red;
}

p#blue_p {
	border: 1px solid gray;
	background-color: blue;
	color: white;
	text-align: left;
	padding: 10px;
}

Related posts:

  1. Class 2 – Solution to In-Class Assignment #1
  2. Class 2 – Homework Solution
  3. Class 3 – Homework Assignment
  4. Class 3 – In-Class Assignment #1
  5. Class 3 – In-Class Assignment #1

Leave a Reply