Hello everybody,

I have a header in which I want to add 3 elements, Title, Logo and Menu. All these elements have a margin on the top and on the side (left for title, right for menu). So far, I worked with Title and Logo. Here is the layout I want to achieve:

Code:
----------------------------------
|                                |
|                                |
|                                |
|   Title   Logo        Menu     |
|                                |
----------------------------------

As you can see, I have a margin on the left and on the top. I tried using this code:
CSS -

Code:
#globalContainer{
	width: 100%;
}
 
#header-out{
	width: 100%;
	background-color: black;
}
 
#header{
	width: 940px; /* Set to % when possible */
	height: 240px; /* Set to % when possible */
	margin: 0px auto;
	background-color: white;
}
 
#header .title{
	margin-top: 12%;
	margin-left: 5%;
	width: 250px;
	height: 100px;
}
HTML -

Code:
<body>
	<div id="globalContainer">
		<div id="header-out">
			<div id="header">
				<div class="title">Test</div>
			</div>
		</div>
	</div>
</body>
My problem comes from the margin-top. I had a lot of trouble to find an explanation why 100% margin-top would put my title out of my screen, then I found out that the margin-top inherit from its parent WIDTH (940px). So I went ahead and tried with a very low percentage and it worked fine... On my screen.

Now, I am wondering if there are not better way to achieve this result, because I must admit that I have no real trust in my solution at the moment.

I tried using Position: Relative along with Top and Left, however when I placed the Logo it ignored the Left value of my Title. I guess I could fix it by adding the same Left value to the Logo, but once again I am not sure that this is the right way to do things.

I want my website to be as standardized as possible and respect the good practice of the web designing. I am pretty much starting in the web design area and want to do things right Wink

Thanks a lot for your time !