Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 13, 2015 12:03
Show Gist options
  • Save anonymous/0042d1422d22f4d88ac5 to your computer and use it in GitHub Desktop.
Save anonymous/0042d1422d22f4d88ac5 to your computer and use it in GitHub Desktop.
Download ZIP
Two Columns With Different Items Alignment // source http://jsbin.com/vasilopeca
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Columns With Different Items Alignment</title>
<style id="jsbin-css">
.column {
position: absolute;
width: 200px;
height: 300px;
}
.column-one {
background-color: yellow;
left: 100px;
bottom: 300px;
}
.column-two {
top: 300px;
background-color: blue;
right: 100px;
}
.wrapper {
position: absolute;
bottom: 0;
background-color: orange;
height: auto;
width: 100%;
}
.absolute {
margin: 10px;
background-color: green;
height: 30px;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<h1>Two Columns With Different Items Alignment</h1>
<div class="column column-one">
<div class="wrapper">
<div class="absolute">one</div>
<div class="absolute">two</div>
<div class="absolute">three</div>
<div class="absolute">four</div>
</div>
</div>
<div class="column column-two">
<div class="absolute">one</div>
<div class="absolute">two</div>
<div class="absolute">three</div>
<div class="absolute">four</div>
</div>
<script id="jsbin-source-css" type="text/css">.column {
position: absolute;
width: 200px;
height: 300px;
&-one {
background-color: yellow;
left: 100px;
bottom: 300px;
}
&-two {
top: 300px;
background-color: blue;
right: 100px;
}
}
.wrapper {
position: absolute;
bottom: 0;
background-color: orange;
height: auto;
width: 100%;
}
.absolute {
margin: 10px;
background-color: green;
height: 30px;
line-height: 30px;
color: white;
}</script>
</body>
</html>
Raw
jsbin.vasilopeca.css
.column {
position: absolute;
width: 200px;
height: 300px;
}
.column-one {
background-color: yellow;
left: 100px;
bottom: 300px;
}
.column-two {
top: 300px;
background-color: blue;
right: 100px;
}
.wrapper {
position: absolute;
bottom: 0;
background-color: orange;
height: auto;
width: 100%;
}
.absolute {
margin: 10px;
background-color: green;
height: 30px;
line-height: 30px;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment