Home/ Questions/Q 6961437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:31:48+00:00

In all the posts I’ve been able to find a deal with either centering

  • 0

In all the posts I’ve been able to find a deal with either centering a div inside another div or putting a div at the bottom of another div, and the advice has been great but I haven’t been able to find anything to do both.

My code is:

<body style="text-align:center; margin:0; padding:0;">
  <div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
    <div>
      <div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
        <div style="float:left; position:relative; left:30px; top:15px">
          <img src="logo.png" width="88" height="38">
        </div>
        <div style="margin-top:15px">
          <h1>Product Form</h1>
       </div>
     </div>
   </div>
 </div>
</body>

All I want to do is to put the formtop.png div at the bottom and center of the containing div. I can do one or the other but I can’t do both. If I change position:absolute to position:relative then the image centers itself but its too high. When I change it back to absolute then it sits nicely at the bottom of its containing div but in IE it’s way off the right and in firefox it’s at the left side of the page.

Any advice?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do it by setting the formtop.png <div> to 100% width and centering the background image using CSS:

    <!-- div with the formtop.png background -->
<div style="
   height:75px; 
   width:100%; 
   background:url(formtop.png) no-repeat 50% 0; 
   bottom:0; 
   position: absolute;">

    As an aside, if you move all your inline styles into a .css file, your code will be a lot easier to work with and maintain:

    <div class="formTop">

.formTop {    
    position: absolute;
    bottom: 0;
    left: 0;    

    height: 75px;
    width: 100%;

    /* Set the background image to centered in this element */
    background: url(formtop.png) no-repeat 50% 0;      
}
    • 0