Skip to content

Instantly share code, notes, and snippets.

@jie

jie/auto_width_layout.html

Created May 5, 2011 07:29
Show Gist options
  • Save jie/956670 to your computer and use it in GitHub Desktop.
Save jie/956670 to your computer and use it in GitHub Desktop.
Download ZIP
a auto width layout
Raw
auto_width_layout.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {-webkit-text-size-adjust:none; padding:0; margin:0;}
body {margin:0;padding:0;background:#fff;font-size:12px;/*background-attachment:fixed;*/}
a {text-decoration:none;color:#000;}
a:visited {color: #333;}
a:hover {text-decoration:underline;}
div,p,a,span,li,ul,ol,textarea,pre,code,blockquote,h1,h2,h3,h4{margin:0;padding:0;}
.clearfix {clear: both;}
.blankspace {clear:both;height:10px;}
.box {
background: #fff;
border: 1px solid #ccc;
}
#HeadWrap {
width:100%;
background:#999;
}
#HeadInner {
height: 100px;
margin-left:10px;
margin-right:10px;
background: #ccc;
}
#FootWrap {
width:100%;
background:#999;
}
#FootInner {
height: 100px;
margin-left:10px;
margin-right:10px;
background: #ccc;
}
#BodyWrap {
width:100%;
margin: 0 auto;
background:#000;
}
#LeftWrap {
width:250px;
height:500px;
float:left;
background: #eee;
}
#RightWrap {
background: #ddd;
margin-left:250px;
}
.et{
float:left;
background: #ff0000;
width:100%;
}
.et-left {
width:100px;
height:100px;
background:#777;
float:left;
}
.et-right {
float:left;
}
</style>
</head>
<body>
<div id="BodyWrap">
<div id="BodyInner">
<div id="LeftWrap"></div>
<div id="RightWrap">
<div class="et">
<div class="et-left"></div>
<div class="et-right">22222222222222222222222222222222222</div>
<div class="clearfix"></div>
</div>
<div class="et">
<div class="et-left"></div>
<div class="et-right">22222222222222222222222222222222222</div>
<div class="clearfix"></div>
</div>
<div class="et">
<div class="et-left"></div>
<div class="et-right">22222222222222222222222222222222222</div>
<div class="clearfix"></div>
</div>
<div class="et">
<div class="et-left"></div>
<div class="et-right">22222222222222222222222222222222222</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment