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.
It 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
When 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:
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:
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:
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:
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:
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…
With this great tutorial I will be able to create an aweseome design for my new wordpress site. Thx for this.
Excellent tutorial..I am developing an interface in MS CRM but had not much idea about layout positioning…this text is great help…kudos.
Glad you liked it 🙂
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.
I’m glad you found the information useful. If you’d like me to cover any specific topic just ask and I’ll do my best. Thanks 🙂
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
Check out how to layout a website. It is a new video tutorial that should answer all of your questions
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
Sorry I couldn’t get to you quicker. I have a new HTML Video Tutorial and CSS Video Tutorial that you may prefer.
not working at all
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.
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.
Sir
Thanks for a wonderful site having great tutorials. God Bless you, sir.
Thank you very much! May God bless you as well 🙂
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!
Thank you 🙂 Ill continue to do the best I can