Skip to content

Instantly share code, notes, and snippets.

@simensen

simensen/gist:884687

Created March 24, 2011 07:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simensen/884687 to your computer and use it in GitHub Desktop.
Save simensen/884687 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<title>Work in Progress</title>
<style type="text/css">
body
{
border:solid thin black;
width:100%;
}
#header {
width:90%;
border:solid thin black;
height:120px;
margin:25px auto 25px auto;
}
#header_nav {
margin-top:35px;
float:right;
}
#header img {
float:left;
}
#header a {
margin-top:35px;
margin-right:3px;
margin-left:3px;
}
#top {
border:solid thin black;
height:300px;
width:90%;
margin:0 auto 25px;
}
#middle {
width:90%;
margin:0 auto 25px;
}
#bottom {
width:90%;
margin:0 auto 25px;
border:solid thin black;
}
.news_item {
border:solid thin black;
height:150px;
width:30%;
margin: 25px 25px 15px 0px;
float:left;
list-style:none;
}
#news {
width:100%;
margin:0px auto 25px;
padding:0px;
}
#link_area {
margin-top:10px;
width:60%;
height:100%;
vertical-align:top;
}
#image_area {
float:right;
vertical-align:top;
list-style:none;
text-align:right;
}
.image {
height:125px;
width:150px;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
float:right;
margin-left:10px;
border:solid thin black;
}
#info {
width:60%;
margin-right:15px;
float:left;
}
.right
{
float:right;
margin-right:0px;
}
.center
{
margin-left:25px;
}
</style>
</head>
<body>
<div id="header">
<span id="header_nav">
<a href="no">Link 1</a> |
<a href="no">Link 2</a> |
<a href="no">Link 2</a>
</span>
</div>
<div id="content">
<div id="top">
</div>
<div id="middle">
<p id="info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl lacus,
rhoncus non posuere non, faucibus imperdiet nunc. Nulla rutrum pulvinar sem
quis sollicitudin. Cras enim neque, rhoncus eget placerat non, mattis id orci.
Aliquam et sem quis lacus consequat sagittis. Integer dictum luctus lectus,
eget auctor risus ultricies sit amet. Nulla facilisi. Quisque felis justo, faucibus id
dignissim eget, pharetra ac arcu. Etiam elit tortor, suscipit ac semper vitae,
tempus eget nibh. Phasellus varius, arcu quis aliquam pellentesque, ipsum
ligula ornare sapien, et semper augue elit a arcu. Sed a neque aliquam neque
bibendum porttitor. Integer et tortor massa. Maecenas diam libero, molestie
tincidunt interdum sed, commodo eget turpis. Praesent volutpat facilisis nunc
ac iaculis. Maecenas vel libero a diam luctus aliquet non at orci. Donec
pellentesque tempor felis sit amet laoreet. Donec iaculis, nibh vel placerat
tempor, ipsum metus placerat sapien, at semper risus velit ut nisi. Nullam
faucibus urna vitae lacus viverra luctus. Nulla facilisi.
Nulla pellentesque, tellus in molestie pulvinar, quam est pretium urna, eu
tempor nibh urna eu risus. In lacinia convallis metus, ut ullamcorper ipsum
luctus at. Mauris pretium tempus mattis. Morbi ac arcu mi. Maecenas ac sem
ligula, a iaculis metus. Maecenas aliquet vestibulum varius. Maecenas sed
purus fermentum enim dignissim aliquam. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Aliquam viverra ante et felis
fermentum nec vestibulum velit venenatis. Suspendisse potenti. Curabitur vitae
purus ut diam tempus dictum. In tincidunt est et orci bibendum vestibulum.
Quisque sed justo erat, vel malesuada mi. Pellentesque ornare, odio at iaculis
suscipit, sapien libero ultricies neque, a convallis urna magna at ligula.
Vivamus ac nibh et libero eleifend tristique. Nam ornare libero sed erat
elementum accumsan.
Nulla a tellus vel lorem faucibus mollis. Curabitur massa velit, fermentum eget
varius dapibus, fringilla non eros. Etiam dignissim sem fringilla elit consequat
consectetur. Fusce suscipit vulputate tincidunt. Aliquam viverra venenatis enim.
Maecenas facilisis vulputate leo, in aliquet nisi luctus pharetra. Etiam ac purus
nibh, id ultrices libero. Morbi vel luctus nulla. Vivamus mollis libero quis urna
tempor euismod. Sed aliquam consequat tortor pharetra congue. Aliquam erat
volutpat. Pellentesque interdum tempor ante eu ullamcorper. Duis a justo id dui
rhoncus pulvinar at non leo. Maecenas nec orci vitae erat bibendum aliquam.
Aenean sit amet nulla a ante bibendum sollicitudin ut vel sem. Etiam at porttitor
nisl. Cras nec lectus id turpis faucibus hendrerit. </p>
<table id="image_area"><tr>
<td class="image">
</td>
<td class="image">
</td>
</tr>
<tr>
<td class="image">
</td>
<td class="image">
</td>
</tr></table>
</div>
<table id="bottom">
<tr><td id="link_area"><table>
<tr>
<td>Link 1</td>
<td class="right">Link 2</td>
</tr>
<tr>
<td>Link 3</td>
<td class="right">Link 4</td>
</tr>
</table></td>
<td >
<table id="image_area"><tr>
<td class="image">
</td>
<td class="image">
</td>
</tr>
<tr>
<td class="image">
</td>
<td class="image">
</td>
</tr></table>
</td></tr></table>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment