Divs to go to the end of the container

nono29 · October 18, 2014, 12:38am

how can it be?
oh is it because the image is bigger than the div
the code

    }
#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;
}

ronpat · October 18, 2014, 12:58am

The declared height plus the padding equals the height of the image.

You have still not changed the height of #apDiv6.

nono29 · October 18, 2014, 1:05am

i change from 749px to 760px like the image size it look like that

ronpat · October 18, 2014, 1:27am

Please show the code for your apDivs

ronpat · October 18, 2014, 1:54am

The heights of the latest image that you just posted are 770px and 760px.

That 5px of padding adds an unnecessary complication to the page

Let us do this…

Delete the padding from the apDivs and increase their height like this:

#apDiv1, #apDiv7 {
    height:770px;
    padding:0;
}
#apDiv6 {
    height:760px;
    padding:0;
}

Now the image heights and the div heights will be the same.

nono29 · October 18, 2014, 12:42pm

Hi ron!

i change like you did now in apdiv6 it is looking good but not in apdiv1+7 see image

the code

 }
#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;
	background-repeat: no-repeat;
	padding:0;
}
#apDiv6 {
	position: relative;
	height: 760px;
	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:0;
}
#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;
	background-repeat: no-repeat;
	padding:0;
}

thanks galia

Edit: You can use ``` above your code and below your code to have it formatted

ronpat · October 18, 2014, 2:09pm

Galia, thank you for the screen shot and the code.

This is the code that you wrote…

#apDiv1 {
    height: [color=red]760px[/color];
    padding:0;
}
#apDiv6 {
    height: 760px;
    padding:0;

}
#apDiv7 {
    height: [color=red]760px[/color];
    padding:0;
}

This is the code that I wrote…

#apDiv1, #apDiv7 {
    height:[color=blue]770px[/color];
    padding:0;
}
#apDiv6 {
    height:760px;
    padding:0;
}

Do you see anything different in the heights that I wrote and the heights that you wrote???

ronpat · October 18, 2014, 2:22pm

Please forgive my bad English.

The height of all three background images is not the same just as the height of the three apDivs is not the same. The height of a background image should be the same as the height of its apDiv.

nono29 · October 18, 2014, 5:37pm

Hi!

you have a bad english what about me i have more and it is not my mother language it is ok

so i think it is ok now the images and the divs are the same height check it up and tell me what do you think
the image look good in 100% view

}

#apDiv1 {
	position: relative;
	width: 480px;
	height: 770px;
	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
	float: left;
	background-repeat: no-repeat;
	padding: 0;
}
#apDiv6 {
	position: relative;
	height: 760px;
	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:0;
}
#apDiv7 {
	position: relative;
	width: 397px;
	height: 770px;
	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);
	z-index: 10;
	float: right;
	background-repeat: no-repeat;
	padding: 0;
}

the images

thanks galia

ronpat · October 18, 2014, 5:46pm

That looks exactly right to me. Is it OK to you? Are you happy with it?

nono29 · October 18, 2014, 5:59pm

hi ron!

yes it is ok to me if i want more long or short divs i know what to do
thank you very much for your help Your patience your knowledge and your time
for now

galia

ronpat · October 18, 2014, 6:01pm

Thank you, Galia.

Learning new things is fun and empowering (it makes you stronger).