Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

CSS Layouts: How to create a two-column layout

In this article we will see how to create a website with two-column layout following W3C standard, using div instead table to organize the layout.

After many years of web development, the internet has changed. One of the most important aspects is the tableless concept (see Box 1). But why I consider this concept the most important one? The reason is that it allows us to get to the level that we are today with responsive websites (see Box 2), mobile sites and the considerable amount of new technologies that emerge.

Box 1: Tableless: A tableless website don’t use tables for structuring the layout and, therefore, is compliant with the Web Standards.

Box 2. Responsive Website: Responsive websites automatically arrange for the best user experience, regardless of the user’s device.

Web standards

  • Web Design and Applications: Those are standards for the development of Web pages, including HTML5, CSS, SVG, Ajax and other technologies for Web Applications ("WebApps"). This category also includes information on how to make pages accessible for users with special needs (WCAG), international access and also mobile devices.
  • Web architecture: Focus on the principles and technologies that support the Web including the URI and the HTTP protocol.
  • Semantic Web: An evolution from the "Web of documents" concept, the W3C support the development of technologies that will enable the "web of data", which should allow searches just like queries in a database. The ultimate goal of data Web is to enable computers to perform more useful activities and to support the development of systems that interact with the network. The term "Semantic Web" refers to the vision of the W3C Linked Data Web. The Semantic Web allows people to create repositories of Web data, introduce vocabulary and write rules to interoperate with these data. This data link is possible through technologies such as RDF, SPARQL, OWL, and SKOS.
  • XML Technology: include XML, XQuery, XML Schema, XSLT, XSL-FO, Efficient XML Interchange (EXI) and other related standards.
  • Web Services: This category groups projects that allow communication between Web applications and that are tied to technologies such as HTTP, XML, SOAP, WSDL, SPARQL, and others.
  • Web Device: One of the W3C’s main focuses is to design technologies that enable Web access for everyone, anywhere, at any time and from any device. Therefore allowing access from mobile handsets (or other mobile devices), other electronic devices, printers, interactive televisions, and even automobiles.

Browsers and Development Tools

We should be able to create content regardless of the software, computer and language we use or even if we're wired or wireless. We should be able to access the web from any type of hardware that can connect to the Internet - fixed or mobile, small or large. The W3C facilitates this interaction, since it is aware of international web standards that ensure that we will continue to improve the web and make it open to us all.

In this article we will see how to create a two-column layout following the tableless standard created by W3C.

Note: We will use the background color for the div elements only for learning and visualization of the layout’s content blocks. If the color does not suit you, just change the background property.

Hands on Code

That’s enough for concepts and definitions. What we really want to learn is how to develop the site, isn’t? So let's begin and see some code.

We will start by creating a blank document in Notepad or any other HTML editor. In this article we will use Adobe Dreamweaver CS5, as shown in Figure 1, but feel free to use any other editor.

Adobe Dreamweaver CS5

Figure 1: Adobe Dreamweaver CS5

Note: Some people stopped using Dreamweaver because of the amount of unnecessary code that it generates, such as the doctype (see Box 3). Particularly, I like to use it in code mode but if you want to use another IDE I recommend Notepad++ or Sublime Text2.

Box 3: DOCTYPE: The Doctype statement is the first thing that should be added to the code of your document before the tags. It is responsible for telling the browser which specification of HTML or XTML is being used (based on the W3C standards).

When you open the document code it should appear is the content shown in Listing 1.

Listing 1. HTML code seen when opening the document

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">      
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>Creating a tableless layout with two columns</title>      
</head>           
<body>      
</body>    
</html>

For standardization purposes we will save this file as index.html.

Note: Some servers use the standard file names “default” or “index”, thus developers usually maintain the same standard.

In addition to the HTML document we need to create a CSS document as it is the file that provides a style to our site.

The tableless standard recommends the use of a CSS stylesheet to position HTML elements on the page in order to structure the layout.

Figure 2 show how to create a CSS document in Adobe Dreamweaver.

Creating a CSS document

Figure 2: Creating a CSS document

The CSS file will be blank for now. First, we will save it as styles.css, but you can save it with a different name.

Let’s begin the creation of our website. The first thing to do is link our CSS file to our HTML page and we do this by using the code shown on Listing two just after the tag.

Listing 2. Linking CSS file with the HTML

<link type="text/css" rel="stylesheet" media="screen" href="styles.css" />

After this step our two files are linked and we can start developing our page.

The next step addresses the div elements. We must create a general DIV to define the size at which the site will occupy the screen and named it "site" (Listing 3).

Listing 3. Creating the first DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">      
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>Creating a tableless layout with two columns </title>        
<link type="text/css" rel="stylesheet" media="screen" href="styles.css" />           
</head>           
<body>        
<div id="site">             
</div>      
</body>    
</html>

This first div is going to be used as a general div to delimit the space that the site will occupy on the actual page.

Next we will customize this DIV using the styles.css file. The code in Listing 4 shows how to apply the first style of our site. It is here that we begin to form our layout.

Listing 4. Inserting the first statements on the styles.css file

 #site{              
width:1000px;           
height:700px;        
margin-top:0;             
margin-right:auto;          
margin-bottom:0;           
margin-left:auto;           
background-color:#666;   
}

After we define the main div of our site the page will look as shown in Figure 3.

The customization of our DIV defined the size (in pixels) of the width and the height.

The margin attribute was used to simplify the understanding, but if you want, you can use with a single statement by following the order: top, right, bottom, left. For instance: margin: 0 auto 0 auto; or if you prefer: margin: 0 auto;. The latter takes the value 0 for top and bottom and the auto value for left and right.

We used a background color with the background-color propperty just to demonstrate the delimitation of space that will occupy the page, as shown in Figure 3.

The main DIV

Figure 3: The main DIV

Now we define the main areas of the page which are the header, the content, and the footer.

We must obey the order "top to bottom" in developing our website, so we must always begin with the header, then the content (the middle DIV), and finally the footer.

Listing 5 shows how to use the tags for the header, the content and the foot.

Listing 5. Using divs to make page sections

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">      
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>Creating a tableless layout with two columns </title>        
<link type="text/css" rel="stylesheet" media="screen" href="styles.css" />           
</head>           
<body>        
<div id="site">             
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>      
</body> 
</html>

After creating the HTML we style it using the styles.css file. The code in Listing 6 show how to customize the header, the content and the footer.

Listing 6. Stylizing the header, the content, and the footer.

#header{           
width:1000px;           
height:100px;         
background-color:#00F;   
}    

#content{          
width:1000px;         
height:500px;        
background-color:#0F0;    
 }      

#footer{         
width:1000px;        
 height:100px;            
background-color:#C3C;   
}

In the code above we customized the three DIVs by setting their width, height, and background color. After these changes our page should look as shown in Figure 4.

Customizing the page’s header, content, and footer DIVs

Figure 4: Customizing the page’s header, content, and footer DIVs

We now have clear spaces for the header (blue), the content (green), and footer (purple). Once we have the structure of our website what’s missing now is the two DIV columns that will hold the content.

We must open our index.html file and within the content DIV we will add two more DIV elements, as shown in Listing 7.

Listing 7. Separating content DIV into two columns

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">      
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>Creating a tableless layout with two columns </title>        
<link type="text/css" rel="stylesheet" media="screen" href="styles.css" />           
</head>           
<body>        
<div id="site">             
<div id="header"></div>

<div id="content"><!-- opening the DIV content -->                 
<div id="content-left"></div>            
<div id="content-right"></div>               
</div><!-- closing the DIV content -->              

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

The two new DIV elements will be responsible for the separation of content in columns: one on the left and one on the right. Next, let’s create the style of our new DIVs with the styles.css file as shown in Listing 8.

Listing 8. Adding style to the content columns

#content-left{        
width:500px;         
height:300px;        
float:left;          
background-color:#FF0;   
}

#content-right{           
width:500px;        
height:400px;            
float:left;          
background-color:#F00;   
}

In the code in Listing 8 we used the width and height attributes and also the float attribute.

It may seem odd that we used the same left attribute in the block placed on the right side, but CSS is a cascading style. The content DIV was defined with a width of 1000px and in the content-left DIV we used 500px. By defining the content-right with 500px, it will be automatically positioned to the right of content-left, because the maximum that the inner DIV can have is 1000px, since 500+500 = 1000px.

This update displays as shown in Figure 5.

Result page

Figure 5: Result Page

As we can see, our content DIV is divided into two, one on the left (yellow) and one on the right (red).

The standardized development benefit more users because when a site uses standards it is displayed in the best possible manner and in any browser.

One of the main institutions responsible for this standardization is the W3C (see the Links section), a specialized group responsible to define the internet standards for web pages.

Bonus - Creating a Menu with CSS

As a bonus let’s see how to make a horizontal menu using a little bit of CSS and HTML5.

The menu (or navigation bar) is a very important element of any website, because, as the name implies, it is the way that the users visit all pages of the site. With a little help of CSS we can customize our menu in a way that it becames much more enjoyable.

The developers that are starting to practice Web Design often ask how to set the menu to a landscape orientation. Therefore, this article show that it is very simple to create a menu with CSS in the horizontal position especially with the HTML5 features available nowadays. Listing 9 shows the complete HTML for this example.

Listing 9. Creating the HTML for the menu example.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title> Horizontal Dropdown Menu </title>
     <!—Let’s specify our CSS file-->
    <link rel="stylesheet" type="text/css"  href="style.css" />
    <!--[if the IE 8]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->    
</head>
<body>
<nav>
  <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
            <li><a href="#">What we do?</a>
                <ul>
                      <li><a href="#">Web Design</a></li>
                      <li><a href="#">SEO</a></li>
                      <li><a href="#">Design</a></li>                    
                </ul>
            </li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contact us</a></li>                
</ul>
</nav>
</body>
</html>

The HTML code of Listing 9 uses a new popular HTML5 element: the tag. This tag was created to group blocks of links that describe the same subject or internal links of the website. This tag identify that a given block is a navigation block.

We must remember that to call an external CSS file we should use the code of Listing 10 inside the tag.

Listing 10. Linking the HTML to an external CSS file

<link rel="stylesheet" type="text/css"  href="style.css" />

As we can see in Figure 6, the result of this HTML is something very simplistic.

A menu without a style

Figure 6: A menu without a style

Let's insert a style to customize and improve our menu?

The first step is set the margin to 0 and padding for all browsers. We do this by inserting a text style to our text menu and remove the bullets from the list. Then we define a border and add the float: "left"; attribute so that the edges are aligned. The code is shown on Listing 11.

Listing 11. Removing the bullet points and setting the edge

*{margin: 0; padding: 0;}
 
body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
 
.menu{
list-style:none; 
border:1px solid #c0c0c0; 
float:left; 
}

Now let's customize the menu items. We will use the position:relative; attribute so that in the future we can change the submenu’s location. Listing 12 shows the new part of the CSS file.

Listing 12. Customizing the menu items

.menu li{
position:relative; 
float:left; 
border-right:1px solid #c0c0c0; 
}

Now let’s customize the style of the links. In this example we inserted the property text-shadow and box-shadow (from the CSS3). You may need to use the latest version of the Browser to this property in action.

Listing 13. Customizing the links

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}
 
.menu li a:hover{
background:#333; 
color:#fff; 
-moz-box-shadow:0 3px 10px 0 #CCC; 
-webkit-box-shadow:0 3px 10px 0 #ccc; 
text-shadow:0px 0px 5px #fff; 
}

CSS dropdown menu

Now let's get started with the submenu. We begin by defining its position as absolute (postition:absolute;) so that the submenu items do not exceed their parent menu and so they do not interfere with the flow of the menu items.

Let us also define a background color and hide the submenu with display:none;

Listing 14. Hiding the submenu

.menu li  ul{
position:absolute; 
top:25px; 
left:0;
background-color:#fff; 
display:none;
}   

Let's see how our CSS menu is looking so far?

The CSS menu almost done

Figure 7: The CSS menu almost done

As we can see, our menu is almost done: let’s say about 80%. What is missing is to display the submenu. Let's see how we do it.

Listing 15. Showing the submenu

.menu li:hover ul, .menu li.over ul{display:block;}

Okay, now our submenu is showing but not perfectly yet. There are still some final adjustments to make it 100%.

Listing 16. Final adjustments

.menu li ul li{
border:1px solid #c0c0c0; 
display:block; 
width:150px;
}

Now our CSS menu is perfectly done, modern, and with the dropdown correctly aligned. If you followed the steps of this tutorial properly your menu should be showing just like Figure 8.

Final form of the CSS menu

Figure 8: Final form of the CSS menu

If your menu does not look like the Figure 8 menu, you probably missed some steps of our tutorial. At the top of this article will have a link to download the source code, so you can test it on your own computer.

I hope you liked this tutorial. See you next time!



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login