problem with div/css positioning

[eddioot]

Hi all,

i am trying to make a banner with several divs but i cannot work out how to create this layout.

This is what i am trying to make:
http://img440.imageshack.us/i/bannerur.jpg/

I cannot succeed in getting the menubar (light blue) and the logo on the correct place.

What I have now is:

<div id="banner">
	<div id="menubar">
    </div>
    
    <div id="logo">
    </div>
</div>

#banner{
	background-image:url(banner_bg.jpg);
	background-repeat:repeat-x;
	height:150px;
		}
	
#menubar{
	margin-top:80px;
	height:15px;
	width:750px;
	background:#000;
}	
	
#logo{
	background-image:url(logo.gif);
	width:75px;
	height:100px;
	margin-left:5px;
	margin-top:10px;
}

 

[PixelPusher]

Divs by default are block level elements. They will always create a line break after one another unless adjusted through css. In regards to the layout above, try using absolute position on the div that will contain the logo. By using absolute positioning, you will remove this div from the flow of the page, allowing you to stack them over each other.
An important fact to remember, an AP element will always position itself to the first parent that has a position set to anything other than static.

So try this:

<div id="banner">
    <div class="menubar"></div>
    <div class="logo"></div>
</div>

div#banner{
        position:relative;
	background-image:url(banner_bg.jpg);
	background-repeat:repeat-x;
	height:150px;
        width:750px;
}
	
div.menubar{
        position:relative;
	margin-top:80px;
	height:15px;
	background:#000;
}	
	
div.logo{
        position:absolute;
        z-index:4;
        top:10px;
        left:5px
	background-image:url(logo.gif);
	width:75px;
	height:100px;
}

 

[PixelPusher]

Take a look at this thread also, focuses on positioning of divs, the how what and why.

http://www.webdesignforum.com/10715-tutorial-css-positioning.html

 

[eddioot]

Thx pixelpusher! With the position absolute, the problem was solved!

 

[PixelPusher]

Anytime, your welcome.