0

I followed the excellent post on creating a grid of responsive squares to create, well, a grid of responsive squares.

What I need to do is create two background divs the span half the height and the full width so that I can attach events to them. These divs however, cannot interfere with the content in the cell.

This is what the square looks like in html:

<div class="row-content">
    <div class="content">
        <div class="table">
            <div class="table-cell numbers">
                <span>100.08</span>
            </div>
        </div>
    </div>
</div>

and the css

.row-content {
    float:left;
    position: relative;
    width: 8%; /* 1 divide number of columns */
    padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
    margin:0.16667%; /* = (100% - (% width * columns)) / (columns * 2) */
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:98%; /* = 100% - 2*10% padding */
    width:98%; /* = 100% - 2*5% padding */
    padding: 1%;
}

.table{
    display:table;
    width:100%;
    height:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
}

.numbers{
    font-weight:900;
    font-size:12px;
    color:#fff;
}

This results in the following:

Sqaure

Here's the fiddle.

I'd like two "hidden" divs behind the content. By hidden I mean divs with no content, there solely for the purpose of attaching events. Something like this:

Colorful square

I'm using Bootstrap 3 and jQuery.

Community
  • 1
  • 1
Jason Strimpel
  • 14,670
  • 21
  • 76
  • 106

1 Answers1

2

Add position: relative; to .numbers class in your css.
Create 2 divs, and add them absolute.

If you want to show divs behind content so add this, like I added. Or remove if you want to close content by divs. 

/* Shows content above divs */
.numbers > span {
  position: relative;
  z-index: 1;
}

Here is my code:

#d1, #d2 {
  width: 100%;
  height: 50%;
  left: 0;
  position: absolute;
}

#d1 {  
  top: 0;
  background-color: rgba(51,107,230,.5);
}

#d2 {
  bottom: 0;
  background-color: rgba(255,221,0,.5);
}

/* Shows content above divs */
.numbers > span {
  position: relative;
  z-index: 1;
}

.row-content {
  float:left;
  position: relative;
  width: 8%; /* 1 divide number of columns */
  padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
  margin:0.16667%; /* = (100% - (% width * columns)) / (columns * 2) */
  background-color:#1E1E1E;
  overflow:hidden;
}

.content {
  position:absolute;
  height:98%; /* = 100% - 2*10% padding */
  width:98%; /* = 100% - 2*5% padding */
  padding: 1%;

}

.table{
  display:table;
  width:100%;
  height:100%;
}

.table-cell{
  display:table-cell;
  vertical-align:middle;
}

.numbers{
  font-weight:900;
  font-size:16px;
  color:#fff;
  position: relative;
}
<div class="row-content">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        <span>100.08</span>
        <div id="d1"></div>
        <div id="d2"></div>
      </div>
    </div>
  </div>
</div>
WinK-
  • 372
  • 2
  • 14