Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
Line 3: Line 3:
<!--Colors Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A-->
<!--Colors Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A-->
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
</head>
 +
 +
<style type="text/css">
<style type="text/css">
Line 13: Line 18:
#maincontainer{
#maincontainer{
-
width: 960px; /*Width of main container*/
+
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
margin: 0 auto; /*Center container on page*/
}
}
Line 30: Line 35:
float: left;
float: left;
width: 100%;
width: 100%;
-
}
+
}
#contentcolumn{
#contentcolumn{
-
margin-left: 250px; /*Set left margin to LeftColumnWidth*/
+
margin-right: 230px; /*Set right margin to RightColumnWidth*/
-
float: left;
+
-
height: 100%;
+
-
padding: 10px;
+
}
}
-
#leftcolumn{
+
#rightcolumn{
float: left;
float: left;
-
width: 220px; /*Width of left column*/
+
width: 230px; /*Width of right column*/
-
height: 100%;
+
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
-
margin-left: -960px; /*Set left margin to -(MainContainerWidth)*/
+
background: #FDE95E;
-
background: #C8FC98;
+
-
padding: 10px;
+
}
}
-
</style>
+
#footer{
 +
clear: left;
 +
width: 100%;
 +
background: black;
 +
color: #FFF;
 +
text-align: center;
 +
padding: 4px 0;
 +
}
-
<head>
+
#footer a{
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
color: #FFFF80;
-
<title>Dynamic Drive: CSS Fixed Layout #2.1- (Fixed-Fixed)</title>
+
}
-
</head>
+
 
 +
.innertube{
 +
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
 +
margin-top: 0;
 +
}
 +
 
 +
</style>
<body>
<body>
<div id="maincontainer">
<div id="maincontainer">
-
 
<div id="topsection">
<div id="topsection">
<div class="innertube">
<div class="innertube">
-
<h1>University of Calgary</h1>
+
<h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1>
</div>
</div>
</div>
</div>
Line 67: Line 79:
<div id="contentcolumn">
<div id="contentcolumn">
<div class="innertube">
<div class="innertube">
-
<b><!--LOL WuP Cushion--> Content Column</b><br/>
+
<b>Content Column: <em>Fixed</em></b>
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis augue eget arcu euismod rhoncus adipiscing at dui. Etiam sit amet sapien a diam pulvinar mattis. Nullam id mauris sed orci laoreet imperdiet. Duis pellentesque
+
-
nulla at neque ornare malesuada. Aliquam varius facilisis facilisis. Sed sapien libero, viverra vel tincidunt at, pretium vitae odio. Donec
+
-
sagittis euismod feugiat. Phasellus ultrices mattis interdum. Aliquam molestie ornare ultricies. Nunc vehicula tempus tellus id volutpat.
+
-
Curabitur molestie imperdiet eros, quis facilisis massa feugiat et. Suspendisse sit amet laoreet ligula. Nunc viverra, mauris ut tristique
+
-
interdum, leo quam mollis nisi, eget sagittis arcu turpis eget ligula. Proin eget ante leo, vel lobortis felis. Donec ut nibh mi. Etiam vulputate
+
-
dui nec est vehicula non tempus ligula porttitor.
+
-
 
+
-
Etiam iaculis egestas magna at rutrum. Vestibulum eget mauris sit amet erat pulvinar venenatis eu vitae sapien. Sed ut mi quis lectus sagittis
+
-
mollis. Duis est nunc, dignissim et lobortis vel, vulputate vel est. Nullam neque neque, consectetur quis vulputate quis, adipiscing ut massa.
+
-
Duis nec metus sed quam facilisis laoreet quis non risus. Mauris ac ante quam, id varius augue. Phasellus vel ligula nulla. Sed interdum velit ac
+
-
ligula ullamcorper lacinia non et tellus. Integer nec dolor lectus. Phasellus nec augue justo, a aliquet nisi. Aliquam rhoncus, nisi sed
+
-
mattis sagittis, purus quam sagittis leo, nec malesuada sapien arcu ut mi. Nam sit amet odio dui. Curabitur orci nisi, hendrerit in gravida ut,
+
-
dignissim et odio. Nulla eu magna justo, eget luctus magna. Sed fermentum leo nec ante interdum at condimentum leo ultricies. Curabitur sodales
+
-
egestas turpis sed cursus. Aliquam erat volutpat. Praesent nisi felis, aliquam non tristique at, accumsan nec tortor. Quisque viverra urna in
+
-
neque imperdiet ut vehicula felis convallis.
+
-
 
+
-
In ac quam in eros luctus adipiscing et eu augue. Nulla vitae diam nisi, non eleifend leo. In pretium feugiat eros vitae dictum. Nam faucibus
+
-
turpis commodo nisl vulputate at tincidunt tortor accumsan. Mauris et ante sit amet erat mollis vestibulum quis in lectus. Aliquam sollicitudin,
+
-
felis et sagittis tincidunt, justo massa vestibulum justo, in tristique ante ipsum in arcu. Donec neque lectus, auctor eu adipiscing non, cursus
+
-
condimentum lacus. Aenean aliquam iaculis ipsum at mattis. Sed leo massa, egestas ac auctor sit amet, aliquet pretium ipsum. Mauris hendrerit massa
+
-
id velit eleifend dapibus. Ut in dui leo. Aenean volutpat imperdiet volutpat. Etiam fermentum nibh id orci placerat a accumsan magna gravida.
+
-
Donec porttitor tristique justo, in congue nunc consequat vitae. Integer et velit augue, et dignissim purus. Donec condimentum feugiat tellus
+
-
porttitor pulvinar.
+
</div>
</div>
</div>
</div>
 +
</div>
-
 
+
<div id="rightcolumn">
-
<div id="leftcolumn">
+
<div class="innertube">
-
<div class="innertube">
+
<b>Right Column: <em>200px</em></b>
-
<b>Nice Code, WuP Cushion! Sidebar Column</b><br/>
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis augue eget arcu euismod rhoncus adipiscing at dui. Etiam sit amet sapien a diam pulvinar mattis. Nullam id mauris sed orci laoreet imperdiet. Duis pellentesque nulla at neque ornare malesuada.
+
-
</div>
+
</div>
</div>
 +
</div>
 +
<div id="footer">
 +
<a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</div>
</div>
</div>
</div>
-
 
</body>
</body>
-
 
</html>
</html>

Revision as of 20:25, 1 June 2010

CSS Fixed Layout #2.2- (Fixed-Fixed)

Content Column: Fixed
Right Column: 200px

Retrieved from "http://2010.igem.org/Team:Calgary/Sandbox"