I am using a template to learn more about fluid design
My main confusion at this point regards how structure and size is defined.
For example in the CSS, there is a header tag; but the actual area of the header/banner is not defined. Or is it? I cannot figure out how this is occurring.
The mark-up seems quite simple.
Please see HTML and CCS below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
</div>
<div id="left-sidebar">
<p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>
</div>
<div id="main-content">
<h2>Why is this layout "perfect"?</h2>
<ul>
<li>Works in all major browsers</li>
<li><strong>Shrinks</strong> to 780px<br />This accomodates users with 800x600 resolution, with no horizontal scroll!</li>
<li><strong>Grows</strong> to 1260px<br />This accomodates users with 1280x768 resolution and everything in between.</li>
<li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li>
<li>The left sidebar is of "equal height" to the main content</li>
</ul>
<br /><br />
<p>
Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit.
</p>
<p>
Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse.
</p>
<p>
In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim.
</p>
<p>
Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing.
</p>
<p>
Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
</p>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}
p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #444444;
text-align: center;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
