demonhale — Wed, 07 Mar 2007 02:22:54 +0000

You will, just be patient...

Monkeyboy — Tue, 06 Mar 2007 20:36:33 +0000

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

Renegade — Tue, 06 Mar 2007 19:36:45 +0000

Monkeyboy;216161 wrote: 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?

Yes, good spotting, they should be floated left. Glad to know you got it working in the end

Monkeyboy — Tue, 06 Mar 2007 10:39:42 +0000

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

demonhale — Tue, 06 Mar 2007 09:37:29 +0000

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...

Monkeyboy — Tue, 06 Mar 2007 09:25:33 +0000

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?

demonhale — Tue, 06 Mar 2007 02:21:16 +0000

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...

<DIV id=navigation>
<P>Links and stuff</P></DIV>
<strong><DIV id=page-container></strong>
<DIV id=scedule>
<P>Scedule</P></DIV>
<DIV id=played>
<P>Latest results</P></DIV>
<DIV id=roster>
<P>Roster</P></DIV>
....
.
.
.
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</P></DIV>
<P class=clear></P><strong></DIV></strong>
<DIV id=footer>
<P>©2007 rarefaction.co.uk. All rights reserved.</P></DIV></DIV></BODY></HTML>

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

#navigation {
	MARGIN-TOP: 5px; BACKGROUND: #434343; <strong>FLOAT: left;</strong> MARGIN-LEFT: 5px; WIDTH: 155px; HEIGHT: 250px<strong>;</strong>
}
#page-container {
	MARGIN-TOP: 5px; WIDTH: 150px; <strong>FLOAT: left;</strong>
}
#roster {
	BACKGROUND: #717171; <strong>FLOAT: left;</strong> WIDTH: 190px; HEIGHT: 150px;FLOAT: left<strong>;</strong>
}
#played {
	BACKGROUND: #a9a9a9; <strong>FLOAT: left;</strong> MARGIN-LEFT: 5px; WIDTH: 190px; MARGIN-RIGHT: 5px; HEIGHT: 150px<strong>;</strong>
}
#scedule {
	BACKGROUND: #717171; <strong>FLOAT: left;</strong> WIDTH: 190px; MARGIN-RIGHT: 5px; HEIGHT: 150px<strong>;</strong>
}

Renegade — Mon, 05 Mar 2007 19:14:24 +0000

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:

<div id="page-container">
<div id="page-header">
</div>
<div id="page-navigation">
</div>
<div id="content-container">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
</div>
</div>

And the CSS:

body * {
position:relative;
margin:0;
padding:0;
}

#page-container {
width: 590px;
margin:0 auto;
}

#page-navigation {
float:left;
width:150px;
}

#content-container {
margin-left:155px; /* giving IE some extra space, but sometimes you can get away with an exact 150px */
}

#content1, #content2, #content3 {
width:30%; /* or (590px - 155px) / 3 */
}

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.

Monkeyboy — Mon, 05 Mar 2007 17:39:04 +0000

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]

Monkeyboy — Mon, 05 Mar 2007 09:15:44 +0000

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.