HTML/CSS Content and Side Pane Design Layout

Submitted by Yorkiebar on Monday, September 16, 2013 - 08:15.
Introduction: Hello and welcome to my tutorial on how to create a basic website layout in which you have a wide content section for the page content and a thiner side content pane for widgets. Steps of Creation: Step 1: First we need to create the basic HTML file and the CSS file: HTML File: 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5. </head>
  6.  
  7. <body>
  8. </body>
  9. </html>
Note: We don't have anything to put in to our css file yet but I have called mine theme.css and it is in the same directory as my index.html file. Step 2: Next we need to link the HTML file to our CSS file and generate random content for our page... 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <link href="theme.css" rel="stylesheet" type="text/css">
  6.  
  7.     <title>Content and Side Pane Design</title>
  8. </head>
  9.  
  10. <body>
  11.     <div class='content'>
  12.         <p>This is my page content and if this was legit content it would be at
  13.         lot more appealing and larger...This is my page content and if this was
  14.         legit content it would be at lot more appealing and larger...This is my
  15.         page content and if this was legit content it would be at lot more
  16.         appealing and larger...This is my page content and if this was legit
  17.         content it would be at lot more appealing and larger...This is my page
  18.         content and if this was legit content it would be at lot more appealing
  19.         and larger...</p>
  20.     </div>
  21.  
  22.     <div class='side'>
  23.         <p>Login Widget</p>
  24.  
  25.         <p>This is where my widgets would go.</p>
  26.     </div>
  27. </body>
  28. </html>
Step 3: Ok. So now we have our content with the class of "content" and our side pane as the class of "side". Now we can give it some CSS... 
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. body {
  7.     width: 100%;
  8.     background-color: #E2E2E2;
  9. }
  10.  
  11. .content {
  12.     width: 78%;
  13.     float: left;
  14.     margin-left: 0;
  15. }
  16.  
  17. .side {
  18.     width: 20%;
  19.     float: right;
  20.     margin-right: 0;
  21.     border-left: 3px solid #9CDDFB;
  22. }
First we set the margin and padding of everything's defaults to 0pixels just in case the browser the user is using has a different preset. Next we set the body width to 100% and give it a background colour - you'd think the body is 100% width by default, right? After that we set our .content (the div with the class of "content") width to 78% and float it to the left of the browser page. We do the opposite with the .side pane to send it to the right of the browser and give it a left border so we can see where it beings (This can look nice if implemented properly but I am just using it as a clear tutorial). Notice how we only gave our elements a total of 98% width in a 100% parent (body)? That's because I gave it a 2% width gap between them, you can remove this and add in padding if you want. Project Complete! That's all there is to a content and side pane website design. Obviously mine doesn't look nice because I haven't taken the time to make it look amazing as this is only an example but you can make great websites with this layout. Below you will find the download for both the files.

Tags

Comments

Add new comment

About text formats