Skip to content

Instantly share code, notes, and snippets.

@rednebmas

rednebmas/test.html

Last active February 27, 2016 06:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rednebmas/85e4b6db728f440e53e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rednebmas/85e4b6db728f440e53e8 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive HTML "table cell" with vertically centered detail arrow
Raw
test.html
<!-- Created for my INFO 360 project ProcrastiNo -->
<!-- Based on code from http://jsfiddle.net/Mandarinazul/WMLd4/ -->
<!DOCTYPE html>
<html lang="en">
<body>
<style>
div {
font-family: Tahoma, Verdana sans-serif;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: white;
}
.container {
width: 100%;
position: relative;
background-color: rgba(255, 255, 0, 1);
}
.left {
width: auto;
background-color: rgba(0, 0, 255, 0.6);
color: white;
margin-right: 150px;
padding: 20px;
border: dashed thick blue;
}
.right-wrapper {
width: 100px;
float: right;
}
.right {
height: 100%;
position: absolute;
background-color: rgba(0, 127, 0, 0.6);
padding: 20px;
border: solid thick green;
transform: translateY(-100%);
}
.clear {
clear: both;
height: 0;
}
.block {
width: 25px;
height: 25px;
border-right: 1px solid white;
border-top: 1px solid white;
position: relative;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
</style>
<div class="container">
<div class="left">Testalsdkjflaskjdflaskjdflkajsdlfkjasldkfjalskdjflksjflkj asdflaksj alskdjflkasjdflk jasdlfkj alskdjf lkasjdfl kajsldk jd</div>
<div class="right-wrapper">
<div class="right"><div class="block"></div></div>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment