Skip to content

Instantly share code, notes, and snippets.

@nomanson

nomanson/boxes.html

Created September 14, 2014 20:16
Show Gist options
  • Save nomanson/47e35a9fd7e2ce31dd4a to your computer and use it in GitHub Desktop.
Save nomanson/47e35a9fd7e2ce31dd4a to your computer and use it in GitHub Desktop.
Download ZIP
Boxes: Exercise in HTML element Flow and relative positioning.
Raw
boxes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="Jan Ingemansen" name="author">
<link href="css/reset_html5.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
<title>
Boxes
</title>
</head>
<body>
<section id="main_container">
<section class="box yellow">
<p>
The blue main box:
</p>
<ul>
<li>&#60;section&#62;.
</li>
<li>width: 960px;
</li>
<li>...
</li>
</ul>
</section>
<section class="box red"></section>
<section class="box red"></section>
<section class="box yellow">
<p>
Smaller boxes have:
</p>
<ul>
<li>&#60;section&#62;
</li>
<li>margin: 10px;
</li>
<li>width: 460px;
</li>
<li>height: 235px;
</li>
<li>...
</li>
</ul>
</section>
</section>
</body>
</html>
Raw
default.css
body {
font-family:verdana,helvetica,sans-serif
/* background: #ccc url('../images/960_grid_12_col.png') center no-repeat; */
}
p {
font-size:24px;
padding:5px
}
#main_container {
width:960px;
margin:auto;
/*makes main_container center in the browser window - puts equal amount of margin on each side*/
background:blue;
overflow:hidden
}
/* all the boxes have the following style in common*/
.box {
width:460px;
height:235px;
margin:10px;
float:left
}
/* the only difference in the boxes styling is background color*/
.red {
background:red
}
.yellow {
background:#ff0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment