Skip to content

Instantly share code, notes, and snippets.

@andywenk

andywenk/div_composing-example.html

Created November 11, 2012 15:30
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 andywenk/4055233 to your computer and use it in GitHub Desktop.
Save andywenk/4055233 to your computer and use it in GitHub Desktop.
Download ZIP
div_composing-example
Raw
div_composing-example.html
<!doctype html>
<html>
<head>
<title>div composing example</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background-color: #ddd;
}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fff;
}
#wrapper #header {
height: 80px;
width: 960px;
}
#wrapper #header #top-navigation{
background-color: #ff0000;
}
#wrapper #header #top-navigation ul li{
display: inline-block;
width: 60px;
}
#wrapper #content {
background-color: #aaa;
padding: 5px;
}
#wrapper #content #text{
background-color: #00ff00;
width: 700px;
display: inline-block;
vertical-align: top;
}
#wrapper #content #sidebar{
background-color: #0000ff;
display: inline-block;
width: 245px;
color: #fff;
}
#wrapper #content #info{
margin-top: 10px;
background-color: #00aa00;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
LOGO
</div>
<div id="top-navigation">
<ul>
<li>home</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="text">
<h1>Text Content</h1>
<p>This is the area where all the cool stuff is ...</p>
</div>
<div id="sidebar">
<ul>
<li>sidebar topic</li>
<li>and another one</li>
</ul>
</div>
<div id="info">
Hi am big
</div>
</div>
</div>
</body>
<html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment