4

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.

Solved here: How to overlay one div over another div

So, here is my HTML:

<div class="container">
  <div class="overlay"></div>
  <div class="content"></div>
</div>

In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).

See my example on jsFiddle The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.

One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.

Is there any way of solving this problem in CSS? 

Community
  • 1
  • 1
andyuk
  • 38,118
  • 16
  • 52
  • 52
  • Can you add more details, and a [fiddle](http://jsfiddle.net)? – uınbɐɥs Jul 09 '12 at 12:05
  • Also, why not use `width: 100%; height: 100%` on `overlay`? – uınbɐɥs Jul 09 '12 at 12:18
  • Added link to JS Fiddle. I cannot use 100% width and height because the overlay is positioned absolutely, so it will fill to cover the page. – andyuk Jul 09 '12 at 12:24
  • Can the `overlay` be inside the `content`? http://jsfiddle.net/YWfTM/21/ for only 100% `width` and http://jsfiddle.net/YWfTM/22/ for 100% `width` and `height`. – uınbɐɥs Jul 09 '12 at 23:10

7 Answers7

2

You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/

This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.

prodigitalson
  • 60,050
  • 10
  • 100
  • 114
  • That's pretty good, but it doesn't work when you set a width on the content. See my fork: http://jsfiddle.net/andyuk/WT4Lm/3/ – andyuk Jul 09 '12 at 12:40
  • Well you cant do that without using js. One way or another you need to get the dimensions/positioning form a parent element. You either need to move you overlay inside `.content` or you need to set the dimensions on `.container`. If you dont want to use JS thats what you have to do whether you use positiong, width, or margin insanity to get ot to the right spot. – prodigitalson Jul 09 '12 at 12:48
1

It's not possible to do this because:

  1. The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
  2. The size of the content div can change as content loads (since it has no fixed width/height).

I solved this by using JavaScript*. Eg.

function resizeOverlay() {
  $('.overlay').css({
    width: $('.content').width()
    height: $('.content').height()
  });
}
$('.content').find('img').on('load', resizeOverlay);

*Code not tested.

andyuk
  • 38,118
  • 16
  • 52
  • 52
0

See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/

Are you trying to do as mentioned in above Demo?

CSS:

#container {
    position: relative;
}

.overlay,
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay{
    z-index: 10;
    background: #ccc;
}
Ahsan Rathod
  • 5,465
  • 2
  • 21
  • 25
  • That overlay works, but I want the overlay to cover the content 100% width and height. See my forked JS fiddle: http://jsfiddle.net/andyuk/YWfTM/10/ – andyuk Jul 09 '12 at 12:26
  • @andyuk: What do you think,by using this css if we define width only for `overlay` div using Jquery/Javascript like this: http://jsfiddle.net/rathoreahsan/YWfTM/18/ – Ahsan Rathod Jul 09 '12 at 12:38
  • JavaScript is a solution, but as I mentioned, it's a bit more tricky for handling images (that have no width and height) in the content. Looks like I'm running out of options for just using CSS. – andyuk Jul 09 '12 at 12:42
0

Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ

CSS

.container {
position:relative;
background:blue;
  color:white;
}

.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
  • You have hard-coded left 15px. I don't know the size of the content. Check out my example on JS Fiddle. – andyuk Jul 09 '12 at 14:01
0

I do not know what you are exactly trying to do but this might work:

container must be relative: anything from static

overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.

CoR
  • 3,826
  • 5
  • 35
  • 42
  • The main problem is sizing the overlay div to cover 100% of the content div. See my example: http://jsfiddle.net/andyuk/YWfTM/10/ – andyuk Jul 09 '12 at 12:35
0

You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:

a) position it absolutely,

#container {
   position: absolute;
}

b) make it float or

#container {
   float: left;
}

c) make it display as table cell

#container {
   display: table-cell;
}

One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.

brasofilo
  • 25,496
  • 15
  • 91
  • 179
Petr Peller
  • 8,581
  • 10
  • 49
  • 66
0

If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.

Travis Michael Heller
  • 1,210
  • 3
  • 16
  • 34