Skip to main content

A Beginner's Guide to CSS | Part Fourteen - Layout in CSS

Submitted by helen on Saturday, April 9, 2011 - 22:18; Modified on Wednesday, August 31, 2016 - 8:44

Welcome to part fourteen of A Beginner's Guide to CSS — CSS Layout. All the other past tutorials have led up to this magnanimous point, where we will be covering a substantial CSS topic — how to create layout with CSS. You're probably thinking, we've covered layout...haven't we? but we haven't really. We've looked at some elements like paragraphs and lists that can be used to layout your content, but the element I will introduce here is the big-gun in creating the central structure of your website: it is called the div element.

Enter the div element

The div element stands for division element and is used to divide up a page into relevant sections. Before HTML5, the div was practically omnipotent as it was the only standard compliant way to lay out content. People were coming round from using tables for layout and hoped on the div bandwagon with relish. Since then, HTML5 has gained popularity, along with several of its semantic elements that can be used to create layout that actually means something — layout with a designated header and footer, navigation that is interpreted as navigation and not just a list.

main
the main page content
header
a header region
footer
a footer region
nav
a list of links
section
a section of content
aside
a section of content that relates to another section of content.

Despite these HTML5 elements, the div element is still essential when creating layout as you use it to create columns, to wrap unspecified content. Take my website, for instance: the column within which this text resides is a div, as is the sidebar to the right.

Unlike the p element, that represents a paragraph or the ul that represents a list of items, the div element doesn't have any specific meaning but it is useful for creating website structure.

How to use the div element

To use the div element, simply place your content within its opening and closing tags, as seen below...

The div element in action

(X)HTML Example:


<div>This is my div. It has some text in it, but you can't actually see the structure of the div unless you apply some styles to it.</div>

Result:

This is my div. It has some text in it, but you can't actually see the structure of the div unless you apply some styles to it.

Styling divs

You'll be pleased to know that applying CSS to the div element is absolutely no different than applying styles to any other element. I know, we go over this in every tutorial, but how else is it going to sink in? Also, you may not have read my other tutorials!

Before we progress onto some useful examples, it is important to note that, as is with many elements, you won't physically see the div until you apply styles to it. So, without further ado, let's drill you with div styling.

How to apply classes to the div element

CSS Code:


#alert {
  padding:6px;
  background-color:red;
  border:4px solid pink;
  font-size:120%; 
}

(X)HTML Code:


<div id="alert">I'm running out of imaginative example text...</div>

Result:

I'm running out of imaginative example text...

There are other selectors you can use to style your divs but I've listed the most common two here. If you don't know about the CSS selectors, check out a comprehensive list at A Beginner's Guide to CSS | Part Two - The Selectors.

Styling the div with the ID selector

CSS Code:


#prettyPanel {
  padding:8px 16px;
  background-color:#F9C0DD;
  border:3px dotted #FF5BA2;
  font:bold 120%;
  line-height:150%;
  text-transform:uppercase; 
  color:#F0F; 
}

(X)HTML Code:


<div id="prettyPanel">Do you like my pretty panel? </div>

Result:

Do you like my pretty panel?

Examples of useful tasks to accomplish with divs

Here are some examples of tasks you will no doubt need to accomplish, which all rely on divs.

Centre aligning a website with a fixed width

A website with a fixed width is a website that uses pixels for its layout measurements. This type of layout is referred to as a fixed layout because its dimensions are calculated relative to the viewing device (the screen resolution, for example), not relative to the content within. We will discuss this further in a later instalment.

For more information on pixels visit A Beginner's Guide to CSS | Part Six - CSS and the Units of Measurement — Pixels.

To centre fixed layouts — as with any other element — we use margin:0 auto.

CSS Code:


#centredPixelContent {
  margin:0 auto;
  padding:10px;
  width:200px;
  background:#039;
  border:1px solid #09C;
  font:120% Georgia, "Times New Roman", Times, serif;
  color:#fff;
}

(X)HTML Code:


<div id="centredPixelContent">
	<p>I have a width set in pixels and am centred to the centre of the screen!</p>
</div>

Result:

I have a width set in pixels and am centred to the centre of the screen!

Centre aligning a website that uses percentage widths

Percentage layouts are referred to as elastic layouts because they resize flexibly based on the percentage value of some other element. Using percentages guarantees that your content won't be too wide for smaller resolutions and will always fit perfectly (providing you specify sensible values). We will cover elastic layout in depth in a later instalment.

For more on percentages visit A Beginner's Guide to CSS | Part Six - CSS and the Units of Measurement — Percentages.

To centre elastic layouts — as with any other element — we use margin:0 auto.

CSS Code:


#centredPercentageContent {
  width:60%;
  margin:0 auto;
  font:120% Georgia, "Times New Roman", Times, serif;
  background:#039;
  color:#fff;
  padding:10px;
  border:1px solid #09C;
}

(X)HTML Code:


<div id="centredPercentageContent">>
	<p>I have a width set in percentages and am centred to the centre of the screen!</p>
</div>

Result:

I have a width set in percentages and am centred to the centre of the screen!

Creating a header

A header (sometimes called a masthead) is the top part of a website that frequently contains the website name, logo, banner, navigation, useful information, etc; navigation doesn't have to go in the header, but it's a common place to put it, for ease of use.

Here's how to create a standard header, with a logo and navigation. As with the other topics introduced in this lesson, we will cover headers in detail later on in the series.

CSS Code for HTML5 Example:


header#siteHeader { 
	padding:8px;
	height:100%;
	overflow:auto;
	background-color:#969;
	border:1px solid #ccc;
}

nav#mainSiteNav ul { 
	margin:0;
	padding:0;
	overflow:auto;
	background-color:#636;
	color:#fff; 
}

nav#mainSiteNav li {
	float:left;
	margin:3px;
	padding:2px;
	width:80px;
	background-color:#C99; 
	list-style-type:none;
}

nav#mainSiteNav li a {
	display:block;
	padding:6px;
	background-color:#99F;
	border:1px solid #ccc;
	text-align:center;
	text-transform:lowercase;
	color:#036;
}

nav#mainSiteNav li a:hover {
	background-color:#C36;
	text-decoration:none; 
}

#logo {
	display:block; 
	width:340px;
	height:122px;   
	text-decoration:none;
}

CSS Code for XHTML Example:

 
#header {
	padding:8px; 
	height:100%; 
	overflow:auto; 
	background-color:#969; 
	border:1px solid #ccc; 
}

#nav {	
	margin:0; 
	padding:0; 
	overflow:auto;
	background-color:#636; 
	color:#fff; 
}

#nav li { 
	float:left; 
	margin:3px; 
	padding:2px; 
	width:80px; 
	background-color:#C99; 
	list-style-type:none; 
} 

#nav li a {
	display:block; 
	padding:6px; 
	background-color:#99F; 
	border:1px solid #ccc; 
	text-align:center; 
	text-transform:lowercase; 
	color:#036; 
}

#nav li a:hover {
	background-color:#C36; 
	text-decoration:none; 
}

#logo {
	display:block; 
	width:340px; 
	height:122px;     
	text-decoration:none; 
}

HTML5 Code:


<header id="siteHeader"> 
  <nav> 
    <ul>
      <li><a href="#" title="Item One">Item One</a></li>
      <li><a href="#" title="Item Two">Item Two</a></li>
      <li><a href="#" title="Item Three">Item Three</a></li>
      <li><a href="#" title="Item Four">Item Four</a></li>
    </ul> 
  </nav> 
  <a href="/" title="Super Special Website" id="logo"><img src="images/super-special-logo.jpg" alt="The logo for my Super Special Website" width="340" height="122"></a> 
</header>

XHTML Code:


<div id="header"> 
  <ul id="nav">
    <li><a href="#" title="Item One">Item One</a></li>
    <li><a href="#" title="Item Two">Item Two</a></li>
    <li><a href="#" title="Item Three">Item Three</a></li>
    <li><a href="#" title="Item Four">Item Four</a></li>
  </ul> 
  <a href="/" title="Super Special Website" id="logo"><img src="images/super-special-logo.jpg" alt="The logo for my Super Special Website" width="340" height="122" /></a>
</div>

HTML5 Result:

XHTML Result:

How this example works

I did some complex stuff in this example, which may look daunting and have you going what the hell?, so I'll explain briefly the method behind my mayhem.

The logo

It is desirable to make your logo a link so users can click on it to get back to your main page. I don't know about you, but when I go to a website nowadays, I expect that, when I click the logo, it will take me back to the homepage. It's practically standard procedure.

That's not all I've done with the logo. For accessibility purposes when you have something like a logo — well, with images in general, actually — you really should supply an alternative form of text that can be rendered should images not display for the user. For example, auditory devices won't display images and neither will screen readers; when a search engine crawls your site, it won't pick up images. To ensure images are accessible, you must use the alt attribute to provide text that clearly describes the purpose of the image.

The links

By default, links are surrounded by a dotted border, to show the user where they have clicked. This is useful, especially for tabbing around the screen and for accessibility purposes. You can remove this outline by setting outline:none or outline:0.

I have also removed the margin from the ul that holds the links and removed the bullet points from the list items. The margin on a list creates an indent which can be very useful, but because we're not displaying our links in bullet point format, there's no point having the margin as it will only interfere with the layout.

I will cover headers in another section, so don't worry if none of that makes sense. All will be explained in detail later on.

Creating a footer

The footer is the bottom part of a website, and frequently contains copyright information, duplicate site navigation (for accessibility purposes), website validation and accessibility information and sometimes author information.

We will cover footers in a later lesson, but for now, here is a simple footer.

CSS Code for HTML5 Example:


footer#siteFooter {
	margin:0;
	background-color:#09F;
	padding:6px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

footer#siteFooter nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
}

footer#siteFooter li {
	display:inline;
}

footer#siteFooter li a {
	color:#60F; 
}

footer#siteFooter #copyright {
	font-weight:bold; 
	text-align:center;
}

CSS Code for XHTML Example:


#footer {
	margin:0;
	padding:6px;
	background-color:#09F;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#footer ul#mainSiteNav {
	margin:0;
	padding:0;
	text-align:center;
	list-style-type:none;
}

#footer li {
	display:inline;
}
 
#footer li a {
	color:#60F; 
}

#footer #copyright {
	font-weight:bold; 
	text-align:center;
}

HTML5 Code:


<footer id="siteFooter">
  <nav>
    <ul>
      <li><a href="#" title="Item One">Item One</a></li>
      <li><a href="#" title="Item Two">Item Two</a></li>
      <li><a href="#" title="Item Three">Item Three</a></li>
      <li><a href="#" title="Item Four">Item Four</a></li>
    </ul>
  </nav>
  <p id="copyright">© ME 2016. Redistribution of this website and all of its content is strictly prohibited.</p>
</footer>

XHTML Code:


<div id="footer">
  <ul>
    <li><a href="#" title="Item One">Item One</a></li>
    <li><a href="#" title="Item Two">Item Two</a></li>
    <li><a href="#" title="Item Three">Item Three</a></li>
    <li><a href="#" title="Item Four">Item Four</a></li>
  </ul>
  <p id="copyright">© ME 2016. Redistribution of this website and all of its content is strictly prohibited.</p>
</div>

HTML5 Result:

XHTML Result:

Two rows of boxes floated next to each other

To get elements to float next to each other in a row, we use the CSS float property and set it to left and then, we "cut" our line of boxes into two lines using either the clear property or by putting a parent element around the boxes and giving it a width.

In this example, we'll go with the first method — using clear — but we will place a div around our boxes anyway, with an ID of boxes, whose purpose will become clear after the example. The reason I'm not just putting a width on the div and leaving it at that is because the clear property is really useful; I've talked about it in other CSS tutorials, but I will discuss it in the A Beginner's Guide to CSS series later on.

Don't worry, if any of this sounds confusing — just look at the example and all will make sense. If it doesn't, drop me a line.

CSS Code:


#boxes {
  height:100%; /* For older versions of IE */
  overflow:auto;
}

.box {
  float:left;
  margin:10px;
  width:60px;
  height:60px;
  background-color:#F93;
  border:1px solid #F66;
  font:130% Georgia, "Times New Roman", Times, serif;
  line-height:340%; 
  color:#C00; 
  text-align:center;
}

.clearBox {
  clear:left;
}

(X)HTML Code:


<div id="boxes>
  <div class="box">#1</div>
  <div class="box">#2</div>
  <div class="box">#3</div>
  <div class="box" class="clearBox">#4</div>
  <div class="box">#5</div>
  <div class="box">#6</div>
</div>

Result:

#1
#2
#3
#4
#5
#6

Why the clear:left?

Simple — because we're clearing a left float. You put the clear on the first item that you want to appear on the next line.

Important issue regarding float leakage!

We're applying a float to our boxes which is fine until we get to box #6. The float:left on box #6 will cause the content after box #6 to float next to it ... which we seriously do not want. To circumvent this we must clear the float. The best way to accomplish this is to place a div round our boxes with overflow: auto (and also height:100% for older versions of IE). This stops the float from affecting the rest of the page.

For more information on the marvellous overflow property, check out How to make an element stretch to fit its contents.

Scrollable content

To create scrollable content, we must give a div a width and height in pixels or ems and apply an overflow:hidden to it. We can't use percentages because they will ensure that the box fits all of the text, which isn't what we want.

CSS Code:


#scroller {
  padding:2px;
  width:100px;
  height:150px;
  overflow:scroll;
  background-color:#069;
  border:2px solid #09F;
  color:#fff; 
}

(X)HTML Code:


<div id="scroller">
Some random text to show how this div scrolls content. It scrolls content in a similar fashion to iframes, but without displaying the contents of another page.
</div>

Result:

Some random text to show how this div scrolls content. It scrolls content in a similar fashion to iframes, but without displaying the contents of another page.

Revision Notes

May 25th 2013

  • Standardised CSS
  • Changed some occurrences of "tags" to "elements", for consistency.

May 23rd 2013

  • Reworded a bit of the tutorial to make it sound clearer.
  • Added in HTML5 examples for creating header and footer, using header, footer and nav elements.