Dealing With Problematic Div Tags
When your page has suddenly decided to suddenly look a complete mess, we can quite often be left wondering if computers really do have a personality which sometimes decides to stop working for no reason other than that they are in a bad mood. This thought however (despite the number of times we may talk to our computer as if it can hear us) is not true. I remember once when I was quite new to web design, my page suddenly decided to mess up and I could not figure out what had gone wrong. After much heartache and code searching, I found the problem – the div tag. To all you experienced and long-time web developers out there, this will not be news to you.
However, I would like to pass on this some hints and tips to all you newbies out there so that you (hopefully) can be more savvy than I was when I started out trying to fix an unhappy web page.
Just in case anyone doesn’t know, I will first explain what a div is. A div is like a container. If you imagine that you have a number of transparencies on your desk, with writing on each. You can draw on these transparencies and change the size of them, then lay them beside each other or on top of each other in order to build a picture or scene. This illustrates the div.
Divs are like transparencies that you can determine the size of and then layer over each other and besides each other in order to build a web page. Divs can hold pictures, text, other divs, forms, anything really – they are simply containers of content.
Assuming you understood all that or you are already clued up on divs, we can move on. The reason divs have such an effect on your page is because they are the foundation of your page. A bit like taking the wrong block in Jenga , if you mess up a div the whole page can collapse.
Here are a few things that can go wrong and some solutions that I have found. I hope these are helpful! You will find these hints and tips most useful if you are using Adobe Dreamweaver.
Problem
Your div tags have suddenly jumped to different co-ordinates on your page, some of them seem to be aligned still but they have moved and you don’t know why. Solution
This can often be because you have deleted a div closing tag </div> quite high up your page. Since the div is unclosed, it is assumed that all the other divs that come after this div in the code are supposed to be inside this div, meaning that the x and y co-ordinates will be taken from the top and left of the unclosed div, instead of the page or the div they are supposed to be in. If you find the unclosed div tag and close it, the divs will go back to where they were supposed to be. Be aware that re-aligning the divs to where you want them to be when they have suddenly moved will only be a temporary solution because the you will encounter other faults later on due to the div tag there still being an unclosed div tag. If you are using Adobe Dreamweaver, you will be able to see a breadcrumb trail for the div tags along the bottom of the window, which will help you determine which div has the error.
Problem
Your div tags have a dotted line around them, they are not showing up in the correct place and you cannot click on the outline to adjust or move it.Solution
This is often caused by an obstruction between the div and the css style associated with it. The obstruction can be caused by a misspelling in the div tag id ie. <div id=”divoen”> instead of <div id=”divone”> This means that the div will not be able to find a css style associated with it, meaning that it will not be displaying correctly. In this case, you will need to change the name of the div attribute “id” in the to match the css style, or change the css style name to match the div attribute “id” – either way, they have to match.This problem can also be caused by the css style sheet not being attached to the page. In this case, simply attach the style sheet to the page properly and the problem will be fixed.
Problem
The div tag is not displaying in the correct place, there is a solid line around the div, but the div cannot be clicked and moved around in Dreamweaver Design View.Solution
This can be caused by the position attribute in the css style sheet. If the attribute is position:relative, you will be unable to move the div with the mouse. If you change the attribute to position:absolute then you will be able to click and drag the div into the desired place. However, position:relative has it’s own benefits so if you do not want the position to be absolute then you can change the x and y co-ordinates manually in the css style sheet or in the properties bar in Dreamweaver. But don’t worry! Being unable to click and drag a relative div is not a fault or problem with your code.
Problem
The div tags are all closed, the id attributes are spelt correctly, the css style sheets are attached to the page properly, but changing the css code has no effect on the div whatsoever, the css code in the style sheet is correct, but the div tag is not changing on the page.Solution
This can be caused by duplicate css styles pointing to the same div by having the same name. Once I was trying to change the scrollbar properties of a particular div, and the css was just making no difference, which was rather frustrating. So I decided to do a simple Find and Replace in the css style sheet and I found that I had two occurrences of the div I was trying to change. Therefore, the div was ignoring the styles I was changing as it was listening to the other set of attributes I had for the div. It seems like an obvious mistake but it is amazing how much bother it can cause! If you do not have duplicate versions of the div attribute set in your css style sheet, try looking in your actual page. If the div has a set of css attributes in the css style sheet and the page, the div will listen to the on-page attributes as they are closer to the div, and thus deemed more important.
If you have a question that is not answered here, feel free to send an email to: theweb
ittrainingsolutions
couk, I will be happy to add it to the list!
Accessibility: 
