Skip to content

Instantly share code, notes, and snippets.

@yurfuwa-chan

yurfuwa-chan/gist:5585932

Created May 15, 2013 17:56
Show Gist options
  • Save yurfuwa-chan/5585932 to your computer and use it in GitHub Desktop.
Save yurfuwa-chan/5585932 to your computer and use it in GitHub Desktop.
Download ZIP
s
Raw
gistfile1.html
<html>
<body>
<style>
.box{
height :40px;
width: 50%;
background: red;
}
.res{
display: -webkit-box;
}
@media screen and (max-width:400px){
.res{
display: block;
width: 200px;
}
.res .box{
width: 100%;
}
}
</style>
<h2> The Liquid Layout</h2>
<div style="">
<div class="box" style="float: left;">
</div>
<div class="box" style="background: black;float: right;">
</div>
</div>
<h2>The Fixed Layout</h2>
<div style="max-width:400px;min-width:200px;">
<div class="box" style="background:blue;width: 200px;float: left;">
</div>
<div class="box" style="width: 200px;float: left;">
</div>
</div>
<h2 style="clear:both;">The Box Layout via MediaQuery</h2>
<div class="res">
<div class="box">
</div>
<div class="box" style="background:black;">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment