Stacking DIV on top

I’m rather rusty, haven’t done much lately and can’t remember how to get this working.

The contents are inside a wrap width: 75%; and margin: 0px auto;

The headerbar spans across the width of the wrap with a background image.

I’m trying to get my site_logo banner (header height x 1000px) to sit on the left hand side of this header, and add Image Logo’s vertically centred on the right hand side of the header. However, I’m looking for these Image Logo’s to sit fixed exactly off the right side of the header and above the site_logo. So for example, the page is zoomed in using the browser, the banner flows below these Image Buttons and the overflow off the DIV is hidden.

<div class="headerbar">
	<div class="site_logo">
			<a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a></div>
	
	<div class="image_logos>
		<a href="index.php" title="Logo" target="_blank">
			<img alt="Logo" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
		</a>
	</div>
</div>

.headerbar {
	height: 175px;
	background-image: url("{T_THEME_PATH}/images/headerbar.gif");
	margin-bottom: 0px;
	background-repeat: repeat-x;
}

.site_logo {
	position: relative; top: 0; left: 0;
	width: 100%;
	display: block;
	overflow: hidden;
	z-index: 1;
}

.image_logos {
	position: fixed; top: 10px; right: 20px;
	display: block;
	overflow: hidden>
        z-index: 2;

Hope that makes sense. I’d very appreciated some guidance on this.

Thanks,

Any positioning tips please?

Your code example contains a few errors (these may have been typos when your message was prepared, but this is where we have to start):

Missing a close quote:


<div class="image_logos[COLOR="#0000FF"]"[/COLOR]>

Potpourri of punctuation:


.image_logos {
	position: fixed; top: 10px; right: 20px;
	display: block;
	overflow: hidden[COLOR="#FF0000"]>[/COLOR]
        z-index: 2;

should be:


.image_logos {
	position: fixed; top: 10px; right: 20px;
	display: block;
	overflow: hidden[COLOR="#0000FF"];[/COLOR]
        z-index: 2;
[COLOR="#0000FF"]}[/COLOR]

It would be more helpful if you could post a link to the page or show more of the code.

Sorry, My apologies, those were silly typo’s I made while starting this thread.

<div class="headerbar">
       <div class="site_logo">
             <a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a></div>

       <div class="image_logos">
          <a href="index.php" title="Logo" target="_blank">
             <img alt="Logo" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
          </a>
       </div>
</div>
    .headerbar {
       height: 175px;
       background-image: url("{T_THEME_PATH}/images/headerbar.gif");
       margin-bottom: 0px;
       background-repeat: repeat-x;
    }

    .site_logo {
       position: relative; top: 0; left: 0;
       width: 100%;
       display: block;
       overflow: hidden;
       z-index: 1;
    }

    .image_logos {
       position: fixed; top: 10px; right: 20px;
       display: block;
       overflow: hidden;
       z-index: 2;
    }

The fixed positioning of the Image Logo’s on the right hand side, fixing them to the browser window, However I want them fixed inside the Headerbar on the right hand side and stay on top of the banner (if it flows over with browser being zoomed in (CTRL and +) ).

Like this Image here: http://i48.tinypic.com/b8mha8.png

Thanks for your help, This seems very easy, just my positioning skills aren’t up to scratch.

Albablue89, I’d recommend floating the object containers rather than positioning them. This demo gives a couple of examples.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?929421-Stacking-DIV-on-top
Thread: Stacking DIV on top
Nov 29, 2012 08:06
Albablue89
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.headerbar {
    height: 175px;
    background-color:#dee;
    background-image: url("{T_THEME_PATH}/images/headerbar.gif");
    background-repeat: repeat-x;
    margin-bottom: 0px;
}
.site_logo {
    float:left;
    padding-top:10px;
    padding-left:10px;
}
.image_logos {
    float:right;
    outline:1px dotted #f00;   /* container layout testing */
}
.image_logos a {
    display:inline-block;
    float:right;               /* try it without this float:right */
    border:2px solid #88f;
    background-color:#fff;
    margin-top:10px;
    margin-right:10px;
}
.image_logos img {
    display:block;
}
    </style>
</head>
<body>
<div class="headerbar">
    <div class="site_logo">
        <a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a>
    </div>
    <div class="image_logos">
        <a href="index.php" title="Logo" target="_blank">
            <img alt="Logo1" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
        </a>
        <a href="index.php" title="Logo" target="_blank">
            <img alt="Logo2" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
        </a>
    </div>
</div>
</body>
</html>