I'm trying to create a unique layout for a table of elements (pictures) where they are arranged horizontally and partially overlap to save space.
I've been experimenting with CSS to achieve this effect. Here's the code I've come up with:
<!DOCTYPE html>
<html>
<head>
<style>
div.tableel
{
height : 100px;
width : 100px;
display: table-cell;
position: relative;
}
div.tableel ~ div.tableel
{
left: -30px;
font-size: 24pt;
}
div.row
{
display: table-row;
}
div.table
{
display: table;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="tableel" style="background-color: red;">
reg
</div>
<div class="tableel" style="background-color: blue;">
ge
</div>
<div class="tableel" style="background-color: yellow;">
rg
</div>
</div>
</div>
</body>
</html>
Although I was able to set the font successfully, I'm puzzled as to why the third element is not shifted to the left as expected.
Any help would be appreciated!