h1 - Tutorial Step 2: Use CSS for positioning your Content

Box 1: We need this box to place h1 and the internal links skip to content (internal reference to anchor in box 3) and skip to navigation (internal reference to anchor in box3) for screenreaders.

h2 - Box 2

Box 2 will later hold my navigation.

back to tutorial

h2 - Box 3

What is new in step 2?

h3 - HTML & Content
  1. Additonal text.
  2. Than I positioned two anchors within box 2 and box 3.
  3. After that, I set three internal references and one hyperlink on this page.
  4. I linked the internal references with the anchors, and the hyperlink with the tutorial page.
  5. I use <i> italic </i> to mark HML elements within the regular text.
  6. That was it for the HTML and content.
Caption - Complete CSS Stylesheet for Tutorial Step 2
th - The Stylesheet 
* {
	margin:      0;
	padding:      0;
	border-width: 0 }

* html div {
	height: 1em }

body {
	color:           #000000;
	font-size:        1em;
	font-weight:      normal;
	text-decoration:  none;
	background-color: #ffffff }

#box1 {
	padding: 2%;
	border:   dashed 2px #c03 }

h1 {
	margin-bottom: 2%;
	padding:        2%;
	border:         dotted 2px #000 }

#box2 {
	margin-top: 10%;
	padding:     2%;
	width:       15%;
	float:       left;
	border:      dashed 2px #c03 }

h2 {
	margin-bottom: 2%;
	padding:        2%;
	border:         dotted 2px #000 }

#box3 {
	margin-top: 10%;
	margin-left: 20%;
	padding:     2%;
	width:       auto;
	border:      dashed 2px #c03 }

h3 {
	margin-bottom: 2%;
	padding:        2%;
	border:         dotted 2px #000 }

p {
	margin-bottom: 2%;
	padding:        1%;
	border:         dotted 1px #036 }

ol {
	list-style:   upper-roman;
	margin-bottom: 2%;
	margin-left:   2%;
	padding:       1%;
	height:        auto;
	border:        dotted 1px #036 }

li {
	display:      list-item;
	margin-bottom: 2%;
	border:        dotted 1px #06c }

table {
	margin-bottom: 2%;
	padding:        2%;
	border:         dotted 1px #000 }

td, th {
	margin: 1%;
	padding: 2%;
	border:  dotted 1px #06c }

.classheadline, caption {
	margin-bottom: 2%;
	padding:        1%;
	border:         dotted 2px #06c }
  1. I set margin, padding and border for all elements on 0. This overwrites browserspecific settings.
  2. To overcome the 3px bug of IE I applied heigt: 1em; to all div-elements, too.
  3. Font, color and background-color for the whole page in the element body. In my experience, 1em is easier to handle than 100.01%.
  4. I applied dashed, red borders to my boxes and black, dotted borders to the elements within the boxes.
  5. Top margins were set for box 2 and box 3.
  6. Box 2 becomes a specific setting for width: 15%; and the declaration float: left;. Now box 2 floats left over box 3.
  7. Every element within a box got a margin-bottom: 2%, to keep them at a distance.
  8. The list element ol needs an addtional margin-left and list-style-position outside to keep it nicely vertical aligned within box 3. I also applied a blue dotted border.
  9. Table elements th, td and caption get margin, padding and blue dotted borders.
  10. Box 3 gets a margin-left. 20% to keep it at bay from box 2.
  11. Headlines within the text are marked .classheadline and table captions get a blue dotted border.
  12. That was it for the style as far as the positioning goes.
back to top (internal reference to anchor in box3)