Home/ Questions/Q 182499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T14:57:01+00:00

I noticed an unusual issue today while throwing together a quick under construction type

  • 0

I noticed an unusual issue today while throwing together a quick ‘under construction’ type page where I’m moving text onto an image using relative positioning. (This page was ‘inspired’ by SO’s offline page, if you care)

<html>   <head>     <title>Bronco Marching Band</title>   </head>   <body style='background-color: #888;'>     <div style='text-align: center;'>       <img src='standby.jpg' width='799px' height='600px' alt='Please Stand By'        title='The Bronco Band website is down for a major upgrade. Please check back later.'         style='width: 620px; height: 465px; opacity: 0.8;' />       <div style='color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: relative; top: -300px; left: 0px;'>         PLEASE STAND BY       </div>     </div>   </body> </html>

It seems to be that the area where the relatively positioned div used to be is still taking up space. i.e. it leaves whitespace below the image where the div would be if it wasn’t positioned.

Is there any way around this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Relative-positioned elements still take up space. You actually want an absolutely-positioned element… you just want it to be positioned absolutely relative to the container!

    <div style='text-align: center;position:relative; zoom: 1;'>    <img src='standby.jpg' width='799px' height='600px' alt='Please Stand By' title='The Bronco Band website is down for a major upgrade. Please check back later.' style='width: 620px; height: 465px; opacity: 0.8;' />    <div style='color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: absolute; top: 200px; left: 0px; width: 100%; text-align:center'>      PLEASE STAND BY    </div>  </div>

    Key changes:

    • Container div has position: relative style set
    • Child div has position: absolute style set, causing it to be positioned at absolute coordinates within the parent.
    • I position relative to the top of the parent, and make the positioned div full-width to allow text-align: center to work.

    Edit: In order for IE6 to position correctly, I’ve used a hack to force layout for the container DIV: the zoom: 1 style. If you don’t need to support IE6, you can omit this.

    Tested in: FF3, IE6, Chrome1, Chromium2

    Demo: http://jsbin.com/uqisa

    • 0