http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FBox_Model%2FDiv
HTML/CSS/Box Model/Div - История изменений
2026-04-04T15:50:39Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Div&diff=5278&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Div&diff=5279&oldid=prev
Admin: 1 версия
2010-05-26T08:16:43Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Block divider==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
p {<br />
margin: 0;<br />
padding: 5px;<br />
background-color: ponk;<br />
border-left: 1px solid gray;<br />
border-right: 2px solid black;<br />
border-top: 1px solid gray;<br />
border-bottom: 2px solid black;<br />
}<br />
* .spacer-large {<br />
padding-bottom: 32px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p>this is a test. </p> <br />
<br />
<div class="spacer-large"></div> <br />
<br />
<p>this is a test. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Click to show and hide DIV content (IE only)==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>ASR Outfitters</title><br />
<style type="text/css"><br />
<!--<br />
body {font-size : 110% }<br />
h1, h2, h3 {font-family : "Comic Sans MS"}<br />
h1 {font-size : 180% ; font-weight : bold}<br />
--><br />
</style><br />
<script type="text/javascript" language="javascript"><br />
<!--<br />
function contactus() { <br />
if (document.all.contactus.style.display=="none") <br />
(document.all.contactus.style.display="block");<br />
else <br />
(document.all.contactus.style.display="none"); <br />
}<br />
function otherstuff() { <br />
if (document.all.otherstuff.style.display=="none") <br />
(document.all.otherstuff.style.display="block");<br />
else <br />
(document.all.otherstuff.style.display="none"); <br />
}<br />
function whatwedo() { <br />
if (document.all.whatwedo.style.display=="none") <br />
(document.all.whatwedo.style.display="block");<br />
else<br />
(document.all.whatwedo.style.display="none") ; <br />
}<br />
function whathere() {<br />
if (document.all.whathere.style.display=="none") <br />
(document.all.whathere.style.display="block");<br />
else <br />
(document.all.whathere.style.display="none"); <br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<p><a href="tour.html">t</a></p><br />
<hr /><br />
<h2 onclick="whathere()">click me</h2><br />
<div id="whathere" style="display:none"><br />
<p>This is a test. </p><br />
<ul><br />
<li><a href="">This is a test. </a>.</li><br />
<li><a href="">This is a test. </a>.</li><br />
<li><a href="">This is a test. </a>.</li><br />
<li><a href="">This is a test. </a>.</li><br />
<li><a href="">This is a test. </a>.</li><br />
</ul><br />
</div><br />
<h2 onclick="whatwedo()">click me</h2><br />
<div id="whatwedo" style="display:none"><br />
<p>This is a test. <a href="">This is a test. </a>.</p><br />
</div><br />
<h2 onclick="otherstuff()">click me</h2><br />
<div id="otherstuff" style="display:none"><br />
<ul><br />
<li>This is a test. <i>This is a test. </i>. <a href="http://www.a.ru/"><br />
http://www.a.ru/</a>.</li><br />
<li>This is a test. <br />
<ol><br />
<li>This is a test. </li><br />
<li>This is a test. </li><br />
<li>This is a test. </li><br />
</ol><br />
</li><br />
</ul><br />
</div><br />
<h2 onclick="contactus()">click me</h2><br />
<div id="contactus" style="display:none"> <br />
<p>This is a test. <br />
<a href="mailto:a@r.ru"><br />
a@r.ru</a>.<br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Click to show or hide DIV section==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<script type="text/javascript" language="javascript1.3"><br />
<!--<br />
function closeall() {<br />
var divs = document.getElementsByTagName("div")<br />
var elements = divs.length<br />
for(var i = 0;i < elements;i++){<br />
var divStyle = divs.item(i)<br />
divStyle.style.display = "none";<br />
}<br />
return;<br />
}<br />
function showOne(showme) {<br />
closeall()<br />
var element = document.getElementById(showme)<br />
element.style.display = "block"<br />
return;<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onload="closeall()"><br />
<!--<a onclick="closeall()" href="javascript:closeall();">Close All</a> --><br />
<h2 onclick="showOne("whathere")">Click me to show or hide content</h2><br />
<div id="whathere"><br />
<p>This is a test. </p><br />
<ul><br />
<li><a href="">This is a test. </a></li><br />
<li><a href="">This is a test. </a></li><br />
<li><a href="">This is a test. </a>This is a test. </li><br />
<li><a href="">This is a test. </a></li><br />
<li><a href="contact.html">Contact Us</a></li><br />
</ul><br />
</div><br />
<h2 onclick="showOne("whatwedo")">Click me to show or hide content</h2><br />
<div id="whatwedo"><br />
<p><a href=".html">This is a test. </a>.</p><br />
</div><br />
<h2 onclick="showOne("otherstuff")">This is a test. </h2><br />
<div id="otherstuff" ><br />
<ul><br />
<li><i>This is a test. </i>. <br />
<a href="http://www.a.ru/">http://www.a.ru/</a>.</li><br />
<li>This is a test. <br />
<ol><br />
<li>This is a test. </li><br />
<li>This is a test. </li><br />
<li>This is a test. </li><br />
</ol><br />
</li><br />
</ul><br />
</div><br />
<h2 onclick="showOne("contactus")">Click me</h2><br />
<div id="contactus" ><br />
<p>This is a test. <br />
<a href="mailto:a@r.ru">a@r.ru</a>.<br />
This is a test. : </p><br />
<address>This is a test. <br /></address><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==div.className (tag.className)==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div.slide {<br />
width: 500px;<br />
height: 468px;<br />
background: red;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="slide"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==div in a div with class name==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<style type="text/css"><br />
body {<br />
background-color: #fff;<br />
}<br />
div.imgholder {<br />
float: left;<br />
background: red; <br />
margin: 0 7px 7px 0;<br />
}<br />
<br />
div.imgholder div {<br />
background: blue; <br />
padding: 0 6px 6px 0;<br />
}<br />
div.imgholder img { <br />
display: block;<br />
position: relative;<br />
background-color: #fff;<br />
border: 1px solid #666;<br />
padding: 2px;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div class="imgholder"><br />
<div><br />
<img src="http://www.wbex.ru/style/logo.png" alt="Photo" /> </div><br />
</div><br />
<h2>Adipiscing Elit</h2><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Division tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Division</title><br />
</head><br />
<body><br />
<div id="main-content"> <br />
<h1>About Us</h1> <br />
<p>about us</p><br />
<br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==DIV with background==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#MainText {<br />
padding: 10px;<br />
margin: 5px;<br />
background-color: #ccc;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="MainText"><br />
<p>this is a test. this is a test. this is a test. this is a test. .</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==div with class name==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div.imgholder {<br />
float:left; <br />
right !important; <br />
background: red; <br />
margin: 10px 0 0 5px; <br />
}<br />
div.imgholder img { <br />
display: block; <br />
position: relative; <br />
background-color: #fff; <br />
border: 1px solid #666;<br />
margin: -3px 5px 5px -3px; <br />
padding: 2px; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="imgholder"> <br />
<img src="http://www.wbex.ru/style/logo.png" alt="" /> <br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==DIV with class name set up for font, size, background color and color==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#navsite {<br />
font-family: Verdana, Helvetica, Arial, sans-serif;<br />
font-size: 0.7em;<br />
font-weight: bold;<br />
width: 12em; <br />
border-right: 1px solid #666; <br />
padding: 0; <br />
margin-bottom: 1em; <br />
background-color: #9cc; <br />
color: #333; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navsite"><br />
<p>Site navigation:</p><br />
<ul><br />
<li><a href="">Home</a></li><br />
<li><a href="">About</a></li> <br />
<li><a href="">Archives</a></li><br />
<li><a href="">Writing</a></li><br />
<li><a href="">Speaking</a></li><br />
<li><a href="">Contact</a></li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==div with id style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#content {<br />
background: red;<br />
height: 400px;<br />
width: 674px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="content"><br />
<h2>header 2<br />
<span id="boat"><br />
</span><br />
</h2><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Float text with DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>double margin</title><br />
<style rel="stylesheet" type="text/css"><br />
div#container {<br />
margin: 0 20px;<br />
background: yellow;<br />
width: 300px;<br />
font: 16px sans-serif;<br />
}<br />
div#float {<br />
margin-left: 50px;<br />
background: rgb(234, 234, 234);<br />
float: left;<br />
border: 1px solid black;<br />
width: 75px;<br />
height: 50px;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="float"><br />
Float text.<br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set border of DIV to 5px double #000000==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set border of <DIV> to 5px double #000000</title><br />
<style type="text/css"><br />
div {<br />
border: 5px double #000000;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set margin to 25px for DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set margin to 25px for <DIV></title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
padding: 10px;<br />
margin: 25px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set padding to 10px for DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set padding to 10px for <DIV></title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
padding: 10px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set position of DIV to absolute, to bottom 50px, to left 100px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.absolute {<br />
position: absolute;<br />
bottom: 50px;<br />
left: 100px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="absolute"><br />
<p> in a div</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set right border of DIV to 1px solid #000000==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set right border of <DIV> to 1px solid #000000</title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
border-right: 1px solid #000000;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set right margin to 1px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set right margin to 1px</title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
margin-right: 1px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set right padding to 1px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set right padding to 1px</title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
padding-right: 1px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set width and height to DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set width and height to <DIV></title><br />
<style type="text/css"><br />
div {<br />
height: 150px;<br />
width: 150px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
</div><br />
<div><br />
<ul><br />
<li>R</li><br />
<li>A</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Shrinkwrapped DIV by setting both width and height to auto==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#block {<br />
width: auto;<br />
height: auto;<br />
background: gold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="block">Vertically Shrinkwrapped Static Block</div> <br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==Use DIV as wrapper==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
<br />
div#wrapper{<br />
float:left;<br />
width:100%;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<form id="form1" name="form1" method="post" action="/"><br />
<br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send" class="submit" /><br />
</form><br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>quid pro quo</h2><br />
</div><br />
<div id="footer"><br />
<p>ask.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Wrap tags in DIV and set the position==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>CSS Layout Techniques</title><br />
<style type="text/css"><br />
#left {<br />
position: absolute;<br />
left:10px;<br />
top:50px;<br />
width:200px;<br />
}<br />
#center {<br />
margin-left: 200px;<br />
margin-right: 200px;<br />
}<br />
#right {<br />
position: absolute;<br />
right:10px;<br />
top:50px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="left"><br />
<p>Navigate:</p><br />
<p><a href="">Home</a><br /><br />
<a href="">News</a><br /><br />
<a href="">About Us</a><br /><br />
<a href="">Get in Touch</a></p><br />
</div><br />
<div id="center"><br />
</div><br />
<div id="right"><br />
<p>Of Interest:</p><br />
<ul><br />
<li>H/li><br />
<li>T</li><br />
<li>S</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source></div>
Admin