Alternative to margin-top ?

**Norin** · Nov 29, 2012 13:47

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 !

**Stevie D** · Nov 29, 2012 15:31

Not sure if I've understood the problem correctly, but have you tried putting
#globalContainer {padding-top:2em;}?
(2em chosen just for an example, vary this as you need to make it appropriate for the design).

**Norin** · Nov 29, 2012 15:41

This is adding a margin to the whole header... I want to add a margin only inside my header and make it respond to the screen of the viewer.

That's why I left the "Set to % when possible" comment, I want my header to be flexible on the screen being used. But the elements inside also have to be flexible to the header height, which is why I was trying to use margin-top with percentage value.

Thanks for your input

User Tag List

Thread: Alternative to margin-top ?

Thread Tools

Display

Alternative to margin-top ?

Bookmarks

Bookmarks

Posting Permissions