Home/ Questions/Q 6123745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:03:09+00:00

I have a layout that looks like this: It’s a table with one cell

  • 0

I have a layout that looks like this:

It’s a table with one cell at the top and three cells below.
The three cells are 150px, auto, 200px.

Inside the middle cell I have a div containing a calendar. I want to be able to put another div with some opacity on top of this one, in order to “blur” it and make it unusable as I process an Ajax request.

I’ve tried styling the opacity-div with

position: absolute;
margin-left:150px;
margin-right:200px;
width:100%

But turned out that width 100% was 100% of the entire screen, not just that cell.

I’ve tried putting the div underneath the calendar div in the code and styling it with:

position: relative;
top: -100%;
height: auto;

But this doesn’t seem to work at all since I have no way of knowing how tall the calendar will be, so I can’t determine height and how much I should move it up.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’d need to put a container div inside the blurrable cell, surrounding the cell’s contents.

    <tr>
  <td>...</td>
  <td>
    <div style="position: relative">
        <div id="calendar">...</div>
        <div id="blur"></div>
    </div></td>
etc...

    This way you guarantee that the absolute positioning will be done relative to this container div, and not whatever element farther up the tree is relative (which could very well be the <body> or <html>).

    • 0