Divs to go to the end of the container

I would like to do so maybe I’ll do it but I hope they will get what I have done with my finish project andwhen it is not necessary and why you said that i can leave the hight?

galia

I am sorry that I answered your question in a way that allowed you to restore the fixed height on #container.

Unnecessary heights are bad practice.

A fixed height on #container is unnecessary. That is why I removed it.

There should be NO fixed height on #container.

Unnecessary heights are bad practice.

Is that clear?

yes Yes i understand do not be angry but in the other pages i can leave the fixed hight

galia

You can also change the other pages so they do not use the fixed height, if you wish to improve them. It is very easy to do.

Thanks for your patience ron i will Continued to change the page and tell you how it goes on Later when i do this

galia

i have a question in time been is it necessary that in all pages will be the same height/fixed height or it could be this and that

thanks galia

I do not quite understand what you are asking.

I believe you are asking if the height of pages can change over time.

The height of a page is determined by its content. Over time, the content might change and thus cause the height to change. That is a good thing. That is why a fixed height on most containers is not desirable. Fixed heights make it hard to change the content in boxes.

If a box contains only an image, such as a photo, then the height of that box should not change over time.

Does this help?

If you are asking if some pages can be taller than others, the answer is absolutely YES.
Pages should be as tall or short as needed to hold their content.

ok thanks but i meant if i can give for example fixed height in page and another page on the same site with height that change with the content

thanks galia

Yes, BUT…

WHY would you do that? As long as the content does not change, the height of the page will not usually change. So WHY would you want to assign a fixed height to any page if it is not necessary?

Let’s pretend that your teacher said that all pages must be exactly 1200px high.

Look back at my chart in post #98

Your job is NOT to assign a height of 1200px to #container.

Your job IS to make the preceeding heights in the right column add up to 1200px. In other words, you have to make the content divs on the page add up to 1200px anyway. So a fixed height on #container is unnecessary.

Does this make sense?

hey ron!
i see the sense of if it but i am not sure to do that
you say it is not necessary but it could be and if i remove the height is the teacher who will check my site will know that is
1200px height of the site and my teacher was say once as it is writing in my notebook there is no necessary to do that high i choose but is in the high standard to build a site

thanks galia

Your teacher WILL NOT be positively impressed if he/she sees an unnecessary height assigned to #container. You have more than enough bad or unnecessary code in your pages already. You do not need to add more.

I do not know what a “high standard to build a site” is. What is it?

If the teacher wants to know the height of a page he can use a screen ruler. They are very accurate.

to you to know to build a site the standard heights as i learned is 600px/1200px but not necessary

galia

OK, those numbers sound like guidelines. That means that the designer is free to use his/her own judgement.

Thank you.

hey ron!

i finish what you tell me to do but it is not looking good there is a space in the bottom of every of the 3 divs (see image).


the code

    #container {
	position: relative;
	width: 960px;
	border: thick outset #000;
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
	overflow: hidden;
}
#header {
	position: relative;
	width: 960px;
	height: 146px;
	z-index: 2;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	border-bottom-style: solid;
	border-bottom-width: medium;
	border-bottom-color: #ac1c33;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	top: 0px;
	background-image: url(images/html-images/canstockphoto178167560_comp.jpg);
}
#tab {
	position: relative;
	width: 960px;
	height: 54px;
	background-color: #57010c;
	border-bottom-width: thin;
	border-bottom-style: solid;
	text-align: left;
	z-index: 4;
}
#apDiv1 {
	position: relative;
	width: 480px;
	height: 760px;
	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
	float: left;
	padding-top: 5px;
	background-repeat: no-repeat;
}
#apDiv6 {
	position: relative;
	height: 749px;
	border: 5px double #640c1a;
	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
	width: 73px;
	float: left;
	z-index: 9;
	background-repeat: no-repeat;
	padding-top: 5px;
}
#apDiv7 {
	position: relative;
	width: 397px;
	height: 760px;
	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
	z-index: 10;
	float: right;
	padding-top: 5px;
	background-repeat: no-repeat;
}
#apDiv8 {
	position: relative;
	width: 960px;
	height: 71px;
	float: left;
	background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
	z-index: 8;
	border-top-width: medium;
	border-top-style: double;
	border-top-color: #000;
}
#apDiv2 {
	position: relative;
	width: 960px;
	height: 98px;
	float: left;
	background-image: url(images/html-images/canstockphoto178167567_comp.jpg);
	z-index: 6;
	background-repeat: repeat;
}
#upper{
	width: 960px;
	height: 85px;
	position: relative;
	background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
	background-repeat: repeat;
	border-bottom-width: medium;
	border-bottom-style: double;
	border-bottom-color: #000;
}
#apDiv1 p:first-child {
    margin-top:60px;    
}

thanks galia

Hi, Galia,

Is this a full resolution screen shot? I only see a with of 874px. I should see 970px. Please remember to post full resolution screen shots.

It looks to me like you did not include the padding-top when you resized the dimensions of the background images. I believe the background images should have the following dimensions:

#apDiv1 (480w x 765h)
#apDiv6 (73w x 755h)
#apDiv7 (397w x 765h)

The dimensions of the background-images should include the width and height and any padding in the div. If you do not include the padding, the images will be too small and will not fit.

You should also double check the height of #apDiv6. It should be 10px shorter than #apDiv1 or #apDiv7.

Thank you.

Hi ron!

i thought that the images should be the same width and height of the div so in just when you do padding in the you have to do image more big than the div? i am sending to you the image and see in the bottom of apdiv6 with Magnifying Glass i thinks there is a space

thanks galia

Galia, both of your questions are already answered…

Message #119:

What is causing the space below #apDiv6? Please READ…

Your code from message #118:

#apDiv1 {
    width: 480px;
    height: [color=red]760px;[/color]
    background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
    padding-top: 5px;
}
#apDiv6 {
    height: [color=red]749px;[/color]
    background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
    width: 73px;
    padding-top: 5px;
}

Message #119:

Why 10px different? Because #apDiv6 has a 5px double border around it. Remember?

but i was include the padding and it whant small/ do not fit
and on apdiv6 to do the same image size to the div
sending code

#apDiv6 {
position: relative;
height: 749px;
border: 5px double #640c1a;
background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
width: 73px;
float: left;
z-index: 9;
background-repeat: no-repeat;
padding-top: 5px;

}

thanks galia

Please attach the other two images also.

According to my notes,

#apDiv1, #apDiv7 {height:765px}
#apDiv6 {height:755px}