1 reply [Last post]
onoffpaul
onoffpaul's picture
Offline
newbie
Last seen: 2 years 44 weeks ago
Joined: 2011-12-16
Posts: 1
Points: 2

Hi,

I'm having a bit of a problem with a container div not expanding with an absolutely positioned image.

I'm creating a vertically scrolling site with all pages contained in single page. The landing page (ie- the one at the top) has an image that needs to fill the screen. However, the problem I am having is that because the background image is positioned absolutley (in order for it to appear in the background), the div underneath is overlapping the div above and cropping the bottom of the large image. It seems to be that the background image in the top div is not expanding the container div.

Any suggestions would be really appreciated!
Many thanks,
Paul

HTML:

        	<div id="homepage_wrap"><!-- THIS IS THE TOP DIV WITH THE BG IMAGE -->
            	<div id="submenu">
                    <a href="javascript:void(0)" onClick="goToByScroll('main_wrap')">HOME /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('about')">ABOUT /</a> 
                    <a href="javascript:void(0)" onClick="goToByScroll('showreel')">SHOWREEL /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('credits')">CREDITS /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('gallery')">GALLERY /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('location')">CONTACT</a>
        		</div><!-- End submenu -->
 
                <img src="images/home_logo.png" width="798" height="103" alt="Heidi Mumford logo" />
                 <img src="images/home_background_img1.jpg" class="background" />
 
               	<div class="view_showreel">
                    <div align="center"><a href="javascript:void(0)" onClick="goToByScroll('header_wrap')"></a></div>
              </div><!-- End 'view_showreel' --> 
 
              <br class="clear" />
  </div><!-- End homepage_wrap -->
 
<div id="about"><!-- THIS IS THE DIV THAT IS OVERLAPPING THE ONE ABOVE -->
		<h1>ABOUT</h1>
  </div><!-- about -->

CSS:

#homepage_wrap{
	width:100%;
	min-height:100%;
	text-align:center;
	overflow:auto;
}
 
img.background { 
	width: 100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	min-width:880px;
}
 
.clear {clear:both;}

Senff
Senff's picture
Offline
Regular
Montreal, Canada
Last seen: 2 years 25 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2011-12-13
Posts: 16
Points: 19

A div container will ignore

A div container will ignore the presence of an element that's positioned absolute inside it, when it comes to expanding.

<div id="container">
   <div id="inside">Inside block</div>
</div>

If #inside is not positioned absolute, then #container will expand based on the size of #inside.
But if #inside IS positioned absolute (relative to #container, then #container will just not expand, and act like #inside is not there at all.

So, in your case, the background image (which is positioned absolute) will not influence the size of #homepage_wrap in any way.

mS