Skip to content

Instantly share code, notes, and snippets.

@naresh-io
Last active July 15, 2016 12:26
Show Gist options
  • Select an option

  • Save naresh-io/ef4d3e77132954bfb80cb48ca2751262 to your computer and use it in GitHub Desktop.

Select an option

Save naresh-io/ef4d3e77132954bfb80cb48ca2751262 to your computer and use it in GitHub Desktop.
Untitled
* {
width: 100%;
padding: 0;
margin: 0 auto;
}
.wrapper {
width: 100%;
height: 280px;
background-color: black;
}
.div1, .div2, .div3, .div4, .div5 {
width: 200px;
height: 100px;
background-color:white;
text-align: center;
vertical-align: middle;
line-height: 100px;
border: 10px solid green;
margin: 5px;
float: left;
overflow: auto;
position: relative;
}
.subdiv {
width: 70px;
height: 70px;
background-color:white;
text-align: center;
vertical-align: middle;
line-height: 70px;
border: 10px solid blue;
margin: 5px;
float: left;
display: inline-block;
}
.diff {
position: absolute;
right: 0;
top: 0;
width: 70px;
height: 70px;
background-color:white;
text-align: center;
vertical-align: middle;
line-height: 70px;
border: 10px solid red;
margin: 5px;
}
<div class="wrapper">
<div class="div1">Div - 1</div>
<div class="div2">Div - 2
<div class="subdiv">Div - 21</div>
<div class="diff">Div - 22</div>
</div>
<div class="div2">Div - 3
<div class="subdiv">Div - 31</div>
<div class="subdiv">Div - 32</div>
<div class="diff">Div - 33</div>
</div>
<div class="div4">Div - 4
<div class="subdiv">Div - 41</div>
<div class="subdiv">Div - 42</div>
<div class="subdiv">Div - 43</div>
<div class="diff">Div - 44</div>
</div>
<div class="div5">Div - 5
<div class="subdiv">Div - 51</div>
<div class="subdiv">Div - 52</div>
<div class="subdiv">Div - 53</div>
<div class="subdiv">Div - 54</div>
<div class="diff">Div - 54</div>
</div>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment