engaged
16-02-2009, 06:47 PM
Okay so today we will be coding a very simple 3 column layout in valid xHTML and CSS. If you don't know the basics of these languages already, I suggest you go learn 'em. Lets start with the full source code.
<!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>2 Column layout</title>
<style type="text/css">
body{
background:#333;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 900px;
}
#leftbox{
background: #9C0;
float: left;
padding: 3px;
width: 150px;
color:#333;
}
#rightbox{
background: #9C0;
float: left;
padding: 3px;
width: 150px;
color:#333;
}
#mainbox{
background: #9C0;
float: left;
padding: 3px;
width: 550px;
color:#333;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftbox">
Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus.
</div>
<div id="mainbox">
Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus.
</div>
<div id="rightbox">
Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus.
</div>
</div>
</body>
</html>
Feel free to take this away and pretend you made it, I dont mind, but surely you would like to know how it works? Lets break it apart bit by bit.
<!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">
That is telling the browser viewing the page the version of html. In this case it's XHTML 1.0 Transitional.1
Then you have the <head> with your meta stuff and title, and the style..
<style type="text/css">
body{
background:#333; /* The background colour */
font-family: Verdana, Geneva, sans-serif; /* The font family */
font-size: 10px; /* The font size */
}
#wrapper{
margin-left: auto; /* This basically centers the div */
margin-right: auto; /* This basically centers the div */
width: 900px;
}
#leftbox{
background: #9C0; /* The background colour (a nice lime green) */
float: left; /* This makes the div float left */
padding: 3px;
width: 150px;
color:#333; /* The font colour (a dark gray) */
}
#rightbox{
background: #9C0; /* The background colour (a nice lime green) */
float: left; /* This makes the div float left */
padding: 3px;
width: 150px;
color:#333; /* The font colour (a dark gray) */
}
#mainbox{
background: #9C0; /* The background colour (a nice lime green) */
float: left; /* This makes the div float left */
padding: 3px;
width: 550px;
color:#333; /* The font colour (a dark gray) */
margin-left: 10px; /* Creates a 10 pixel margin to the left of the div */
margin-right: 10px; /* Creates a 10 pixel margin to the right of the div */
}
</style>
If you look through that code, i have commented on important bits.
Now if you clever, you may have noticed that all of the boxes have the same float:left attribute. No, i'm not stupid. I would tell you why this happens and all the thoery stuff, but honestly I dont know. All you need to know is that when two divs and floating in the same direction, they will be placed next to eachother,
unless..
+ The divs combined width (and margins) is wider than the viewers browsers set width, in which case they will go ontop of eachother
You will also notice I didnt add any height:x attributes, this makes the divs expand. Thats basically all you need to know.
Live preview: http://jackinnes.net/tutorial.html
Quoted from my account on CHF and HAF.
<!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>2 Column layout</title>
<style type="text/css">
body{
background:#333;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 900px;
}
#leftbox{
background: #9C0;
float: left;
padding: 3px;
width: 150px;
color:#333;
}
#rightbox{
background: #9C0;
float: left;
padding: 3px;
width: 150px;
color:#333;
}
#mainbox{
background: #9C0;
float: left;
padding: 3px;
width: 550px;
color:#333;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftbox">
Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus.
</div>
<div id="mainbox">
Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus. Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus.
</div>
<div id="rightbox">
Maecenas tellus dolor, vehicula eu, rhoncus sed, commodo vitae, eros. Aliquam auctor faucibus elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet libero id nisl. Proin turpis dolor, viverra sit amet, posuere sed, convallis a, ligula. Fusce cursus lectus non dolor tempus molestie. Nam a mi et mi ultricies molestie. Pellentesque interdum feugiat sem. Duis consectetur. Donec condimentum pellentesque risus.
</div>
</div>
</body>
</html>
Feel free to take this away and pretend you made it, I dont mind, but surely you would like to know how it works? Lets break it apart bit by bit.
<!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">
That is telling the browser viewing the page the version of html. In this case it's XHTML 1.0 Transitional.1
Then you have the <head> with your meta stuff and title, and the style..
<style type="text/css">
body{
background:#333; /* The background colour */
font-family: Verdana, Geneva, sans-serif; /* The font family */
font-size: 10px; /* The font size */
}
#wrapper{
margin-left: auto; /* This basically centers the div */
margin-right: auto; /* This basically centers the div */
width: 900px;
}
#leftbox{
background: #9C0; /* The background colour (a nice lime green) */
float: left; /* This makes the div float left */
padding: 3px;
width: 150px;
color:#333; /* The font colour (a dark gray) */
}
#rightbox{
background: #9C0; /* The background colour (a nice lime green) */
float: left; /* This makes the div float left */
padding: 3px;
width: 150px;
color:#333; /* The font colour (a dark gray) */
}
#mainbox{
background: #9C0; /* The background colour (a nice lime green) */
float: left; /* This makes the div float left */
padding: 3px;
width: 550px;
color:#333; /* The font colour (a dark gray) */
margin-left: 10px; /* Creates a 10 pixel margin to the left of the div */
margin-right: 10px; /* Creates a 10 pixel margin to the right of the div */
}
</style>
If you look through that code, i have commented on important bits.
Now if you clever, you may have noticed that all of the boxes have the same float:left attribute. No, i'm not stupid. I would tell you why this happens and all the thoery stuff, but honestly I dont know. All you need to know is that when two divs and floating in the same direction, they will be placed next to eachother,
unless..
+ The divs combined width (and margins) is wider than the viewers browsers set width, in which case they will go ontop of eachother
You will also notice I didnt add any height:x attributes, this makes the divs expand. Thats basically all you need to know.
Live preview: http://jackinnes.net/tutorial.html
Quoted from my account on CHF and HAF.