margin inside of div

meester · Jan 20, 2011

Hey everyone. So for some reason I cannot get my margin property to align my #footer within the #container. I want there to be a 10px space between the middle divs and the footer image. I've got 10px of padding around the #container, and would like to keep the same theme spacing the footer image down 10px, as you can see in the attached image in which is displayed in browser.
Could I get some help please! I've been at this for awhile now, double checking heights and what not but cannot seem to get it to work

thanks
CSS

Code:

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	overflow:auto;
	white-space:no-wrap;
}
#wrapper {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:984px;
	height:;
	}

#container {
	position:relative;
	width:960px;
	height:500px;
	padding:10px;
	text-align:center;
	border-style:solid;
	border-width:2px;
	border-color:#0e7bc0;
}
#header {
	position:relative;
	height:110px;
	width:984px;
}
#footer {
	position:relative;
	width:960px;
	height:90px;
	margin-top:10px;
}
#header_logo {
	position:relative;
	height:110px;
	width:320px;
	float:left;
}
#header_nav {
	position:relative;
	height:14px;
	width:660px;
	float:left;
	text-align:right;
	vertical-align:bottom;
}
#container_nav {
	position:relative;
	width:150px;
	height:365px;
	padding-top:35px;
	background-color:#0e7bc0;
	padding-left:10px;
	text-align:left;
	float:left;
}
#container_content_word {
	position:relative;
	height:365px;
	width:390px;
	padding-top:35px;
	text-align:left;
	padding-left:10px;
	float:left;
}
#container_content_img {
	position:relative;
	width:400px;
	height:400px;
	float:left;
}

HTML:

<body>
<div id="wrapper">
	<div id="header">
		<div id="header_logo">logo image placer</div>
		<div id="header_nav">this is nav
		</div>
	</div>
	<div id="container">
		<div id="container_nav"></div>
		<div id="container_content_word">
		<p>this is where description of visiting page goes</p> 
		</div>
	 	<div id="container_content_img">pictureplacer</div>
	    <div id="footer"><img src="Media/images/website_images/footer%20copy.gif"></div>
	</div>
</div>
	
</body>

leroy30 · Jan 21, 2011

Try structuring your code and commenting segments to help yourself out there...


<div class="header">


<div class="menu"></div>

</div>


<div class="content">
My content
</div>


<div class="footer">
</div>

I'm not quite understanding your picture and description properly but I'd say your problem is that 'float:left' on the container_content_word

What do you want it to float left for anyhow?

PixelPusher · Jan 21, 2011

You have the "footer" div as a child element of the "container" div, is there a reason for this? I suggest moving that, so it is a child of the "wrapper" div (on the same level as header and container).

If you dont want to move it, try adding this to the "container_nav" div...

Code:

margin-bottom:10px;

meester · Jan 21, 2011

leroy30 said:
Try structuring your code and commenting segments to help yourself out there...


<div class="header">


<div class="menu"></div>

</div>


<div class="content">
My content
</div>


<div class="footer">
</div>

I'm not quite understanding your picture and description properly but I'd say your problem is that 'float:left' on the container_content_word

What do you want it to float left for anyhow?

I've just got the 3 divs in a row, so I figured I'd float them across -pretty new at this so I'm definitely still getting familiar to using the right tags.

PixelPusher said:
You have the "footer" div as a child element of the "container" div, is there a reason for this? I suggest moving that, so it is a child of the "wrapper" div (on the same level as header and container).

If you dont want to move it, try adding this to the "container_nav" div...

Code:

margin-bottom:10px;

I used the margin-bottom technique and guess what, it worked thanks a lot. I have it as a child because I wanted the border around the mid content as well as the footer. And since I'm just using an image for the footer, I figured what the heck.
Here is a screenshot of where I'm at now. I'm currently just working on the index page and all the images/content for the site, and will be posting the final product for a review and comments (since this is my first site - rev 2 BTW)

Uploaded with ImageShack.us

margin inside of div

meester

New Member

leroy30

New Member

PixelPusher

Super Moderator

meester

New Member