Adding CSS Style to HTML: Layout & Positioning

Posted by on Mar 18, 2010 in CSS Style HTML | 16 comments

In this article I’m going to completely cover layout and positioning with Cascading Style Sheets and xHTML. If you haven’t read/viewed my xHTML W3C Tutorial or my Adding CSS Style to HTML article, you should do that first.

Block Element DiagramIt is very important to enclose all of your code into a series of block elements. Everything on your page should be enclosed by a Header or Paragraph Tag. If you do that, not only will you be xHTML compliant you’ll also have no problem with positioning your content.

If you forgot, here is a list of every block element tag:

<blockquote> : Block Quote
<div> : A block container that we’ll talk about soon
<dl> : Definition list
<form> : Form
<h1>, <h2>, … <h6> : Header Tags
<hr> : Horizontal Rule
<ol> : Ordered List
<p> : Paragraph
<table> : Table
<ul> : Unordered List

The <div> Tag

DIV Element DiagramWhen you have all your content separated into block elements, it is time to start sectioning off your content using the <div> tag. For example, I separated the boys content from the girls content on this page. And, also I gave each <div> tag an id, so I could style them as I like. You could give them an appropriate background color by editing your CSS page as such:

#boys {
background-color: blue;
}

#girls {
background-color: #FFC0CB; /* Pink in Hex Code */
}

Now, I’ll give you some sample code to play with, so you really get div’s!

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Playing With DIV Tags</title>
</head>

<body>

<div id=”brain”>
<h3>What a Brain</h3>

<p>
<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />
</p>

<p>
Here I am demonstrating how to style a div element. This is pretty exciting stuff.
</p>
</div>

</body>
</html>

If you entered that into your browser, you would get something that looks like this:

What a Brain

Picture of Blue Brain

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

Let’s make this div more stylish, by editing some CSS code. If you don’t know how check out my CSS Tutorials.

#brain2 {
border-width: 2px;
border-style: dotted;
border-color: #4682B4;
background-color: #E0FFFF;
width: 200px;
text-align: center;
}

Here is an example of how the div will look with a little styling:

What a Brain

Picture of Blue Brain

Here I am demonstrating how to style a div element. This is pretty exciting stuff.

You can edit the div element’s margins and padding to move it around on the screen, just like we did in the box element tutorial. The best way to learn is to start messing around with HTML and CSS in a simple text editor.

Editing Items Inside of a div Element

Another great thing about div elements, is that you can edit the tags inside of it with ease. Let’s say you want to change the color of the <h3> tag, inside of the brain2 div. Just type the following into your style sheet:

#brain2 h3 {
color: purple;
}

Now every <h3> tag, just inside the brain2 div, will be the color purple. You can also change the text within the div by creating some CSS that targets the <p> tag also.

SPAN Elements: How to Style Inline Elements

It’s great that we can use div elements to contain and edit block elements, but what about inline elements? You can edit inline elements with a great tag called span. Let’s say you would like to make text blink in fuchsia to irritate people that visit your site. Here is the CSS code:

.irritate {
color: fuchsia;
text-decoration: blink;
}

And then insert the following code into your xHTML code:

<span class=”irritate”>Wow, this will blow your mind</span>

And you’ll get this Wow, this will blow your mind

It’s Time to Make div Elements Move

We’ll your almost a CSS Guru. I just have to teach you how to move your content around the screen. Then you’ll be able to create multi-column layouts or irritating popups. Whee!

To get the brain div you just created to place itself in the right corner of the browser, requires just one line of text: float: right; Here is an example of a web page using float: right.

The code behind this page is here:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Playing With DIV Tags</title>
<style> #lypsum { border-color: #FFFFFF; }

#brain2 {

border-width: 2px;
border-style: dotted;
border-color: #4682B4;
background-color: #E0FFFF;
width: 200px;
text-align: center;
float: right; /* Here is the float property in action */
margin-left: 50px;
}
</style>
</head>

<body>

<h2>Demonstrating the Float Property</h2>

<div id=”brain2″>
<h3>What a Brain</h3>

<p>
<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />
</p>

<p>
Here I am demonstrating how to style a div element. This is pretty exciting stuff.
</p>
</div>

<div id=”lypsum”>
<h3>Just Some Random Text</h3>

<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</p>

</div>
</body>
</html>

Pretty simple huh? The only thing you must remember is that the div you are floating, must appear before the div you want to be to the right of. As you may notice the brain2 <div>, is not floating to the right of the title. That is because the title block element appears in the html code, before the brain code. If you are happy with the distance between the div you are floating, just adjust the padding and margins until your happy. By the way, you just learned how to make a two column layout as well.

Creating a Proper Two Column Layout

I know the first example wasn’t pretty. It didn’t have a Header, Footer, the Main Content and Sidebar were flowing together, etc. Here is an example of how to create a more proper two column layout. And, the code behind the page:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Playing With Layouts</title>
<style>

body {
background-color: #FFF;
}

#header {
background-color: #006;
color: #FFF;
padding: 20px;
}

#footer {
background-color: #006;
color: #FFF;
padding: 20px;
}

#lypsum {
background-color: #FAF0E6;
margin-right: 240px; /* This is the reason the main content is separated from the sidebar */
}

#brain2 {
border-width: 2px;
border-style: dotted;
border-color: #4682B4;
background-color: #E0FFFF;
width: 200px;
text-align: center;
float: right; /* You could just as easily float to the left */
margin-left: 20px;
margin-top: 20px; /* Without this, your sidebar would be touching the header */
}
</style>
</head>

<body>

<div id=”header”><h2>This is the Title Bar</h2></div>

<div id=”brain2″>
<h3>What a Brain</h3>

<p>
<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/LittleBrain.png” alt=”Picture of Blue Brain” />
</p>

<p>
Here I am demonstrating how to style a div element. This is pretty exciting stuff.
</p>
</div>

<div id=”lypsum”>
<h3>Just Some Random Text</h3>

<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</p>

</div>

<div id=”footer”><h2>This is the Footer</h2></div>

</body>
</html>

I know it’s not a beautiful site. I’m trying to keep everything as simple as possible. What we have now is:

  • A Header, that you can style to your hearts content, using all the CSS styling you have learned.
  • A Footer, that you can style as well.
  • A main content area that isn’t flowing into the right sidebar. You can create additional divs inside of this main div and style away, by the way.
  • A Right Sidebar, which you can place additional divs or that can become a left side bar, by just changing float: right to float: left!

You may not realize it, but you have learned a ton about CSS! If you wanted to turn this into a three column display with two sidebars on the left just:

  • Create a new div, filled with content of your choice
  • Give this div a custom class name and create CSS styling for it
  • Adjust the the property margin-right, in your main content area
  • Make sure the new div is placed in your HTML code before the main content div

Here is a link to this two column layout. Check the page source to see how it was done.To create a three column layout, with a left and right sidebar:

  • Create a new div, filled with content of your choice
  • Give this div a custom class name and create CSS styling for it (Change float: right to float: left)
  • Adjust the the property margin-right and margin-left, in your main content area
  • Make sure the new div is placed in your HTML code before the main content div

Here is a link to this two column layout. Check the page source to see how it was done.Liquid CSS Layouts Versus Locked CSS Layouts

All of the layouts I have been showing you, are known as liquid layouts. If you resize the browser window, the content area stretches to fill in the additional space provided. A Locked Layout on the other hand will stay in place, no matter how the browser is resized. Each type of layout has their own positives and negatives, so choose which ever fits your specific project.

Setting Up a Locked Layout

To create a layout that is locked down, you need to surround all of your div’s with a enclosing div with a fixed width. The CSS Styling for it would look like this:

#master {
width: 1000px; /* Fixed width will keep everything locked down */
padding-top: 10px; /* You’ll probably want padding */
padding-bottom: 10px;
background-color: #ffffff; /* Probably the same color as the background color for your <body> tag */
margin-left: auto; /* Centers the whole web page and makes the left and right margins equal */
margin-right: auto;

}

There you are. That’s about all there is to creating a Locked CSS Layout. Just to make sure you understand. The opening <div> for the master <div> would appear right after the <body> opening tag. The closing </div> for the master, would appear right before the closing </body> tag.

Place Div’s Exactly Where you Want

Yes, you can tell the browser exactly where to place your div’s down to the pixel and it’s called Absolute Positioning. I have to warn you though, that it is very easy to break the structure of a web page if you don’t precisely calculate the exact placement of your div’s. Over the years, when I have been called in to fix someone else’s CSS errors it has almost always been because of errors with Absolute Positioning.

The major difference between normal and absolute positioning, is that the order of the HTML code doesn’t matter. Think of your divs as playing cards. You could stack them up on top of each other with absolute positioning. In fact, there is a new property for absolute positioned divs that specifies which div is above others on the page (The Z Index).

The CSS style coding for an absolute positioned div looks like this:

#sidebar {
background-color: #FFFFFF;
padding: 20px;
position: absolute; /* Here is where we a defining that this div will be absolute positioned */
top: 100px; /* We want it to appear 100 pixels from the top of the web page */
right: 0px; /* We want it to be stuck to the right of the browser web page */
width: 200px;
z-index: 99; /* The higher this number, is the top more the div will be versus the others */
}

Kissing Cousins Love Relative Positioning

A div element that is relatively positioned is positioned relative to another div. Welcome to another technique that can break your page design, if not used properly! You would relatively position an object within the div that it lies by default. Here is the code needed to relatively position anything:

.sidebar img {
position: relative;
left: 100px;
top: 100px;
}

Let’s Make an Irritating Popup with Fixed Positioning

Have you ever gone on a web page and seen a popup window, that was embedded in the web page itself and followed you around as you scrolled? Aren’t those irritating? Well to end this whole CSS Style HTML Tutorial, I’ll show you how to make one!

They are made with a CSS technique known as Fixed Positioning. Here is an example web page using Fixed Positioning. Here is the code you would use to irritate visitors:

#popup {
border-width: 2px;
border-style: dotted;
border-color: #4682B4;
background-color: #E0FFFF;
width: 200px;
text-align: center;
position: fixed; /* Here is where you set the div as a fixed positioned div */
top: 100px; /* How far from the top of the browser window should this div appear? */
left: 300px; /* How far from the left of the browser window should this div appear? */
}

That’s All Folks

Well, now you know everything there is to know about Cascading Style Sheets! I left out some properties that only work in one browser, but not another. Aside from those broken properties, you know everything. I hope you enjoyed this series of articles? Comment below. If you have any questions, comment below. If you’d like to see a Javascript, PHP, mySQL, or WordPress Theme  tutorial comment below. For everything else… You get it.

Till Next Time…

16 Responses to “Adding CSS Style to HTML: Layout & Positioning”

  1. prepaid vergleich says:
    June 25, 2010 at 11:46 pm

    With this great tutorial I will be able to create an aweseome design for my new wordpress site. Thx for this.

    Reply
  2. Amyn says:
    December 13, 2010 at 11:07 pm

    Excellent tutorial..I am developing an interface in MS CRM but had not much idea about layout positioning…this text is great help…kudos.

    Reply
  3. Max says:
    January 1, 2011 at 9:44 am

    I cannot even begin to explain how absolutely awesome your
    tutorials are. I have gone through my share of youtube video
    tutorials and yours is by far the most professional and down to
    earth. I have learned more in one day with your tutorials then i
    have in years with others. Im talking about all of them not only
    this css Once im done learning i will send a donation.
    Thanks.

    Reply
  4. Dermot says:
    November 21, 2011 at 4:55 pm

    The comments are testament to your expertise..I have also watched several videos and yours is by far the highest standard..
    can you help me with this

    Could you explain or email code showing how to position another image under the image (brain1) on the left side bar or similarly under image (brain2) on right sidebar…plz

    Reply
  5. jagannath ghosh says:
    March 24, 2012 at 2:22 am

    Hi, Derek,
    I am trying to insert the image in mozilla fire fox, and internet browser and but the img tag is not working at all.

    This is not working at all.
    Please advise

    Reply
  6. jagannath ghosh says:
    March 24, 2012 at 2:24 am

    not working at all

    Reply
  7. jagannath ghosh says:
    March 24, 2012 at 4:34 am

    Hi, Derek
    I wrote above that “I am trying to insert the image in mozilla fire fox, and internet browser and but the img tag is not working at all.”

    This is actually working now, I found the solution. When write any id “” double cots, it is not working but if I write them without “” it is working…by the way the tutorial was very nice. I enjoyed very much.

    Reply
    • admin says:
      March 24, 2012 at 1:32 pm

      I’m glad you got it working. WordPress which my site runs on forces all quotes to be displayed as back quotes. Sorry about the confusion. My new tutorials eliminated that issue.

      Reply
  8. Srikamal Singanamala says:
    October 7, 2012 at 12:23 am

    Sir

    Thanks for a wonderful site having great tutorials. God Bless you, sir.

    Reply
  9. install whatsapp on ipod says:
    June 30, 2013 at 10:43 pm

    Thanks for one’s marvelous posting! I really enjoyed reading it, you happen to be a great author. I will make certain to bookmark your blog and definitely will come back very soon. I want to encourage you to definitely continue your great work, have a nice afternoon!

    Reply

Leave a Reply to jagannath ghosh Cancel reply

Your email address will not be published.

Google+