Position problems

I would probably advise against using absolute and relative positioning together since you do get a lot of problems that way. Try using just relative positioning all the way.

In your #banner{} you have set top:0px; you can move the banner down by setting it another value. Same again for the left value to move the banner to left/right more.

As for your footer not banner not going underneath your banner, it is most likely caused by your absolute positioning of the #banner/#logo. Try changing either or both to relative and it should move down.

If you're wondering why the footer did what it did, have a look at "page flow." Basically, what absolute positioning does to an element is take it out of the "page flow" kinda like it doesn't exist on the page.

Hey thanks Renegade, that seems to be doing the job. I've just changed all the positionings to relative and adjusted the positions to fit. There does seem to be a large space at the bottom of the page for some reason now though . Also it's totally screwed up in IE (it's always been screwed up in IE btw)... what's up with that?

for the 15 px gap at the top you need to have the reset code to the body, have a body property of margin:0px; padding:0px; to start with so theres no adjustment first...

And for that top elements of logo and header you don't need a position:absolute property there, you can just use double divs, or just add float:left; on head and logo properties...

And that overlap of banner and logo is caused by your perfect measurement of the wrap container with the banner size and logo size, but the logo has border since you put a link attribute to it which is

Try fix up the following problems first:

'

You also have:

'

Which is helping in the huge gap at the bottom.

Just a note on relative positioning - you should be using the margin selectors instead of the top, left, right and bottom selectors. Try realigning everything with margins and it should help you figure out what is wrong.

Thanks guys that's fixed the css spelling mistakes, the overlap and the gap at the top now.

demonhale;216122 wrote: And for that top elements of logo and header you don't need a position:absolute property there, you can just use double divs, or just add float:left; on head and logo properties...

What do you mean by double divs? I've floated the logo and banner divs left now which works fine but if double divs are a better option I'll go with that.

I know where that huge gap at the bottom is from now though. its because of my relative positioning of the 'content' div. If you look at that page now where I've removed the position:relative, you can see the div is below the sidebar. By moving the div up with my relative positioning the 'original' location still affects the 'container' div the content is in. I'll have to wait until after work now to have a look at fixing that.

It's still completely boned in IE however lol.

Ok I freaking give up, why is it so messed up in IE!! I still can't get the content up under the header either

I could leard to hate html

[Edit]What?... my divs add up to a total width of 590 so why doesn't it fit in a container of the same width? Opera can do it, Firefox can do it... oh wait, Explorer says no. Apparently Bill thinks 587px = 590px *fumes*[/edit]

No one can really comprehend why IE does what it does. So, here is what I would probably be doing if I was making a similar layout as you:

'

And the CSS:

'

As you can see, my approach is more or less the same as yours except I floated my navigation (sidebar) instead of my content.

FYI, I think what demonhale means by "double divs" is "nested divs" which simply means a DIV inside another DIV, i.e. nested.

Well your css dont have the close tags, and you improperly marked the elements at top, that's why it won't push on top... Correcting this with proper nesting and floats could do the trick...

A quick-fix would be to delete this div and it's closed element on your html here...

'
.
.
.
Then on your Css, Close all elements with the semicolon ";" and then float all elements left, since you floated some right... Like so:
'

Hey thanks for all you help guys and excuse me if i'm a bit slow... this css stuff confuses the hell outta me.

Renegade wouldn't contents 1,2 and 3 would need to be floated too or they're just going to stack up instead of be next to each other?

demonhale;216151 wrote: Well your css dont have the close tags, and you improperly marked the elements at top,

Meh? I can't see where I don't have any close tags or improperly marked elements. The css file validated with the w3c validation tool too

Using a mixture of Renegades and Demonhales advice I've done thus:

Kept the content-container but brought the navigation div inside it.

I've floated everything inside the content-container left.

Fiddled around with the div margins and added a 5px padding to the page 'wrap' to give a black border around the whole page.

This seems to work across all browsers except there's supposed to be a 5px margin between the bottom of the content and the top of the footer. Instead this varies from 0px in opera, 10px in FF and 5px in IE.

The thing adding up my widths and left/right margins I get 750px but the 'wrap is also 750px AND has a 5px padding applied. Surely this means the stuff inside should only be able to add up to 740px?

Quote:
Meh? I can't see where I don't have any close tags or improperly marked elements. The css file validated with the w3c validation tool too

I looked at your css this morning and there were no ";" at all end of css properties block(the last one of the properties), now it does, so maybe you corrected it or it corrected itself with the edits...... glad to know you managed to fix the site...

Cheers dude, could well be... I've been chopping and changing left right and center trying to sort this page out. I was originally hoping to try out some new techniques (like the position attribute) with this site and get something a little more stable but it looks like it's come down to the same old formula again:

1. Add Header div
2. Add content div filled with floating divs
3. Add Footer div
4. Spend 4 or 5 hours fudging about with margins and padding getting increasingly more annoyed.
5. Page magically works
6. Give up trying to understand why and just be glad that it does.

Cheers for all the help. My PC would probably have gone out of the window if it wasn't for you guys

Thanks dude, it actually resembles a website now

I managed to overcome the gap problem brtween the page content and footer by applying a padding of 5px to the bottom of the content-container instead of a margin. No idea why it needed that to work but it does so i'm happy.

I'll get the hang of all this one day

You will, just be patient...