My tableless coding

Okay i had a go at tableless coding. The website should look like www.intelligent-studios.co.uk except without the content:

www.intelligent-studios.co.uk/tableless.html

I checked on validator and it comes up with errors that the div tags do not have ending tags, but if i add the ending tags to the end of the document before the end of the body it still doesnt work. I don't know how to sort that. Also on the site there appears to be a white line above the content and things are out of line, i don't know why.

You have to close the div tags in the right places. Only thing I can think of.

<div id="foo">
<div id="poo">
</div> <-- closes poo
</div> <-- closes foo

Surely if I added the tags to the end of the body tag then that would close them, but it doesn't .

If the layout is breaking when you close the div tags that means something is in the wrong place.

well im not too sure about that but if you go to a validator site it shows the errors which i don't know how to fix.

Thats put by my host, not me therefore comes atfter the html.

it is good practice to ALWAYS add notes to div tags. it will save you so much time when something isn't working. as you will see on your site, there are so many /div tags its impossible to know which one closes what tag. if you do it like this, you will always know which closing tag is which, and you can easily read through the page to see if you've missed one:

<div id="test">

<div id="test2">

<!-- end of test2 -->
</div>

<!-- end of test -->
</div>

I wouldn't comment it exactly like that edd but you do have a good point.

It's always a good idea to put comments in crucial places within your code so human eyes can read through it with ease.

For example mark where the header starts and ends and where the navigation starts and ends...

These areas can contain more than one div but they still make the code easier to read.

Commenting is good, it also really helps when you haven't touched a site for a while and have to jump back into the code.

I have redesigned the site in css. It looks okay apart from the 2 template pages. Can someone tell me why middle div tag has jumped down below the other column in IE but not in firefox where it works properly:

Problem page = http://www.intelligent-studios.co.uk/clantemplates.html

IE sometimes will push an element below the floated one due to width or something. I don't have my laptop with me so my trouble shooting atm is a bit limited on this box I am on.

Also there is an extra period in

#templateleft {
float:left;
width:197.px;
}

should be

#templateleft {
width:197px;
}

Attached is a screenshot with your layout structure dont know if it will help or not.

Attached Images

screenshot.jpg (147.2 KB, 66 views)

Yes that was the problem. Its been fixed now.