Container Wrapper Div mot working

Get Started
1

I am basically just practicing a page layout trying out some of my recently acquired knowledge:eek:
It’s seem as though some of the “old” stuff I thought I already knew is however failing me. :nono::nono:

The page aka The Project has a div id container that has it’s end tag just before the </body> tag with all the other divs on the page nested in between. this has in the past worked quite brilliantly to wrap those elements and keep them in grouped together. This time however it is not working as advertised. Could someone take a look and see what I am missing. Usually in a case like this it is soomething really simple. I have checked for misspelled words etc. NO JOY:shifty:

I appreciate it
MIKE E:eye::eye:

2

You are right, there are many roads that lead to Rome, There are a few basics though and if you keep those in mind one should not face to many problems.

There was something in your styles which confused me somehow and that was the id body on your body tag. Declaring the the body like:

body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; margin: 0px;

is enough. You don’t need to give your body an id

Anyway good luck with the site

3

Thanks for your help. There are so many combination’s you can use to basically get similar results. I still cannot figure out why the wrapper did not perform as it always has. I have used that method so many times before and for some reason today it did not. I have been going over it trying to determine what I did differently today.

Again thanks for your reply,
MIKE E:eye::eye::eye:

4

First of, I don’t know what layout you would like to accomplish? Is it the width of the content and the right_sidebar together?

What I noticed though is that your container doesn’t has a width. The width of the masthead and footer is 875px so I presume that would be the width of the entire content:


html, body {
     height: 100%
}

body {
    /* some body attributes like font-size, color, font-family, etc.. 
}

#container {
    width: 875px; min-height: 100% margin: 0 auto -100px; background: #009900 ; 	border: 3px blue  solid;
}

* html#container {
   height: 100%;
}

#masthead{
	width: 869px; background-color: #CCCC00; border: 3px #663300 ridge;
	text-align:center; margin: 25px 0;	
}
#masthead h1, h2, h3, h4, h5, h6 {

	color: red; 	font-family:  Verdana, Geneva, Tahoma, sans-serif;
	font-weight: 300; 	font-style: oblique;
	
}
#content{
	width:495px; background-color:#FFFFFF; float: left; 	border: 3px red solid;
}

#right_sidebar{
	width: 325px; background-color: #FFFFFF; float: left; margin-left: 43px ; border: 3px red solid; 
}

#content p,
#right_sidebar p {
    margin: 10px;
}

#footer{
	width: 869px; height: 100px 	background-color: #009900;
	border: 3px  solid fuchsia; margin: 0 auto;
	
}

.clear-footer {
    height: 100px; clear: both
}

HTML


<div id="container">
<div id="masthead"><h1>Welcome to the PROJECT</h1>
<h2>Continued Pratice of New Skills</h2>
</div>

<div id="content"><h3>What is the Profect?</h3>
<p>It started about 4 years ogo</p>
</div>

<div id="right_sidebar"><h3>Resources</h3>
		<h3>Mobile</h3>
		<h4>Droid</h4>
			<p>content</p>
		<h4>IPone</h4>
			<p>content</p>
		<h4>Windows Mobile</h4>
			<p>Content</p>
	
		<h3>Applications</h3>
		<h4>Droid Apps</h4>
		<a>article goes here?</a>		
</div>



<div class="clear-footer"></div>
</div>
<div id="footer">
<h4>FOOTER</h4>
</div>

Changed a few things, i.e. I took the footer out of the container and gave it a height(100px) I gave the same negative bottom margin to the container and I added a class clear-footer add the end of the container this way you create a sticky footer. I took your padding from content and sidebar away. I try never to use padding in floating elements, since they can be confusing. instead I gave the <p> for both content and sidebar a margin of 10 px