CODEWITHSUNDEEP
htmlcss
Dev Newb
Dev Newb

Reputation: 565

How to Center div AND place at bottom of another div

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?

Upvotes: 1

Views: 4847

Answers (3)

Yogu
Yogu

Reputation: 9445

Try to avoid html elements that are only used for style, because you might wish to change your style later.

See this example, which uses the :after pseudoclass:

div {
    width:100%;
    position: relative;
    background-image: url(header.png);
}

div:after {
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 20px;
    background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
    background-repeat: no-repeat;
    background-position: center 0px;
}

You can set your header.png as background for div.

Upvotes: 0

I.G. Pascual
I.G. Pascual

Reputation: 5965

Have you tried left:0; right:0; trick for absolutely positioned elements? It does not work for IE7 nor IE6, but it does for the rest of the browsers and later versions.

This is an example http://jsfiddle.net/6w6VR/

Upvotes: 1

Pat
Pat

Reputation: 25675

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;      
}

Upvotes: 1

Related Questions