43 lines
3 KiB
HTML
43 lines
3 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Grids CSS Example - YUI Grids</title>
|
|
<link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
<style>
|
|
|
|
/* for a custom page width, divide your desired
|
|
pixel width by 13 to find em width. Multiply
|
|
that value by 0.9759 for IE via *width. For
|
|
example, this is a 600px page-width: */
|
|
|
|
#doc {
|
|
margin:auto;text-align:left;
|
|
width:46.15em;/* !IE */*width:45.04em;/*IE*/
|
|
min-width:600px;}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body id="yahoo-com">
|
|
<div id="doc" class="yui-t1"><!-- "t1" here for example only; use any template. -->
|
|
<div id="hd">
|
|
<p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
|
|
</div>
|
|
<div id="bd">
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<p>MAIN: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
|
|
</div>
|
|
</div>
|
|
<div class="yui-b">
|
|
<p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
|
|
</div>
|
|
</div>
|
|
<div id="ft">
|
|
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|