Skip to content

Instantly share code, notes, and snippets.

@lionhylra

lionhylra/3column-all-dynamic.css

Created October 30, 2013 11:08
Show Gist options
  • Save lionhylra/7230864 to your computer and use it in GitHub Desktop.
Save lionhylra/7230864 to your computer and use it in GitHub Desktop.
Download ZIP
页面布局Layout 3 columns / left and right, content are all dynamic. 3 columns / left and right fixed, content is dynamic.
Raw
3column-all-dynamic.css
#left {
position: absolute;
left: 2%;
width: 22%;
top: 106px;
background-color: #ffffff;
}
#content {
position: absolute;
left: 25%;
width: 50%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right {
position: absolute;
left: 76%;
width: 22%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
Raw
3column-center-dynamic.html
<!DOCTYPE html>
<html>
<head>
<style>
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#content {
margin: 0px 190px 0px 190px;
border-left: 2px solid #564b47;
border-right: 2px solid #564b47;
/*border-bottom: 2px solid #564b47;*/
padding: 0px;
background-color: #ffffff;
overflow: auto;
}
#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
overflow: auto;
}
#right {
position: absolute;
right: 0px;
top:0;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="content">
</div>
<div id="right">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment