I have searched and cannot find the answer to my problem…which I’m sure is an easy fix, but as I am a beginner I am stumped.
My page keeps scrolling well beyond the footer element. I want the page to finish under the footer element obviously.
Any suggestions on what I’ve done wrong with my code or what I’m needing to add.
Thanks
You’ve gone about your layout all wrong, I’m afraid. To make those boxes in the middle sit side by side, it’s best to remove any left/right margins and float them, and remove the “top” settings. With position: relative, you can move the boxes out of their normal position, but the space they should have occupied remains there, and hence the huge gap remains.
So remove all the top settings on all elements, and float those middle boxes, then we can look at how to do the final adjustments. 
Hi,
Thanks for your advice. I understand that concept - i.e. relative positioning only moves the box from it’s ‘original’ position and it makes sense that I would then have excess space below the footer.
I have done as you suggested and if you can help me go to the next step of aligning the elements correctly. I think my brain is nearly fried at this point.
Secondary, Tertiary, Quaternary and Footer elements all need adjusting.
I kept the ‘navigation’ and ‘main’ elements using ‘relative’ positioning. I kept the top setting on the ‘main’ element, however should I change these elements to float & remove the top setting from ‘main’ also?
Thanks again.
OK, good work. The next thing I would suggest (as you asked) is to remove all the other top settings too, as they aren’t needed and will get you into a bit of trouble. If you need spacing, use padding/margin instead. I’m happy to help you through this, so perhaps first move all those top settings (and any other positioning) as that will hep to get the rest right.
I’ve just worked on my ‘index’ page and any CSS related to this. All other CSS I will change when I have this first page under control.
I removed position: relative from
I have left all css relating to content as is - should I also be positioning this content using padding and margins only and eliminating all references to relative or absolute positioning?
When I removed position:relative from the following some of my content also moved. So I’m presuming that I need to position my content using another method?
#header, #navigation, #main, #main-who, #main-contact, #primary, #primary-who, #primary-what, #primary-contact, #secondary, #tertiary, #quaternary, #footer {
padding: .2em .5em .2em .5em;
margin: 2em auto 2em auto;
width: 880px;}
OK, it’s looking better now (don’t worry about things being out of place, as that will be fixed).
The next thing I’d suggest is to replace things like <aside> and <section> with <div>, as these new elements aren’t supported properly by browsers yet, and so there’s no advantage (but lots of disadvantages) in using them. That will make the remaining fixes a lot easier.
Ok - I’ll work through that and fix margins to position properly before I post again…we’ll see if I get it right!
Thanks
Quick question before I move forward.
One of the reasons why I probably began using position: relative is I wanted my site to sit centered on the viewport. So if you go to the site at the moment, I have used margins to position the three boxes & footer, however now I have to get these boxes to move together with the rest of the page when the page size is increased or decreased. Do I need to link these elements to a parent element like body to do this? See example below. If I link to #body though I loose all my other CSS (the square box with rounded corners disappear). Before I continue positioning the remainder I’d like to fix this…thanks again.
#body > #secondary {
float: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 165px;
background-color: #F4F0E9;
width: 280px;
height: 245px;
-moz-border-radius:20px;
border-radius: 20px;
box-shadow:5px 5px 10px gray;
behavior: url(pie.htc);
No, don’t worry, centering those boxes is easy. Just give the aside div these styles:
#aside {
width: 940px;
margin: 0 auto;
overflow: hidden;
}
Then remove all those margins on the inner boxes.
Trust me, we will take care of all this, but please first remove all those top settings.
Ok…getting there. I think I’ve done everything you’ve asked so far.
I’ll wait for your next direction.
Thanks
OK, great. Next things I’d do would be:
Change
#navigation {
background-color: #E0D9CE;
box-shadow: 2px 1px 6px gray;
height: 50px;
[COLOR="#FF0000"]margin-right: 193px;[/COLOR]
width: 905px;
z-index: 1;
}
to
#navigation {
background-color: #E0D9CE;
box-shadow: 2px 1px 6px gray;
height: 50px;
[COLOR="#FF0000"] margin: 0 auto; [/COLOR]
width: 905px;
z-index: 1;
}
And
#main {
background-color: #F4F0E9;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px gray;
[COLOR="#0000CD"]height: 480px;[/COLOR] // remove this line
margin-bottom: 10px;
[COLOR="#FF0000"]margin-top: -25px;[/COLOR] // remove this line
text-align: left;
z-index: 2;
}
to
#main {
background-color: #F4F0E9;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px gray;
margin-bottom: 10px;
text-align: left;
z-index: 2;
}
And
#footer {
background-color: #645E57;
float: left;
height: 200px;
margin-bottom: 10px;
[COLOR="#0000CD"]margin-left: 165px;[/COLOR] // remove this line
margin-top: 10px;
}
to
#footer {
background-color: #645E57;
float: left;
height: 200px;
margin-bottom: 10px;
margin-top: 10px;
}
Do you want some space between those thee boxes in the middle?
Yes I do want space in-between, so I presume I add
margin-right and margin-left to the boxes where applicable?
You can do something like this:
#secondary, #tertiary, #quaternary {margin: 10px 6px 15px 0;}
But if that spacing is not enough, widen the container a bit before increasing the margins.
By the way, remove float: left from the #footer.
It’s starting to look good! Thanks
So really I should avoid using Position:absolute or relative?
Now that I have that all sorted I’ll just get the content within the boxes positioned only using margin or padding.
Am I on the right track.
By the way why should I avoid using absolute and relative positioning?
Thanks
They have their uses, but they are best kept for smaller, non-essentioal on-page elemtns. When an element has pos:abs it is taken out of the flow, meaning that other elements don’t see it, so you have to be very careful when content expands, as the ap element can start to get in the way etc. As you saw with pos:rel, using it to move things around causes problematic gaps etc.
One place where position: absolute may be of some use is with the image inside your #primary div. The <figure> around it is not needed, though. A better way to use pos: abs here is to give the container position: relative, so that you place that image in relation to its container rather than to the browser window.
E.g.
#primary {position: relative;}
#primary > figure img {
width: 250px;
position: absolute;
top: 40px;
right: 50px;
}
Well thank you so much for your time! It has helped me out hugely and hopefully now I’ll be able to continue building it correctly, I understand a lot more now. My pile of site point books has served me well but it doesn’t replace getting help from a pro - and an Aussie at that! Have a great afternoon.
You’re welcome. I’m glad I could help. Please feel free to come back again, and to keep the questions coming if need be.