Adding a new div in CSS caused some anchor tags to double in size

HTML & CSS
1

I don’t know if this is a bug, but I have spent about 5 hours on it. I added a new division in my css and it caused a wrap to occur in one of my other div anchor tags. Removing the div makes the tags display normally.
Below is the offending div.
The following is a link to the test page. www.treecare.tv/testpage.html
A new set of eyes on it would be appreciated.

Texas Pete

#CSSHEADER4 {
display:block;
border:4px;
border-style:solid;
position:absolute;
border-color:rgb(25,25,113);
background-color:rgb(100,149,237);
left:225px;
top:168px;
width:429px;
height:535px;
 }
2

HI,

#CSSHEADER4 seems to be an empty div at the moment and removing it just takes away the background colour. It will have no effect on any other elements because it is absolutely positioned.

The text “pest control” is wrapping because it greater than the 140px width you set on the parent.

Of course I may be looking at the wrong thing or you have changed it since your original :slight_smile:

3

Paul, I checked the length of the “pest Control” to. The funny thing is that when the header is removed. The "Pest CONtrol " displays as it should. This is what is confusing me. I was under the assumption that the div had nothing to do with it also…
Texas Pete

4

Paul, I added some space by increasing the width by 20 px. I computed the width by actually measuring the string length on my windows . Am I getting the correct font size in the browser. I actually multiplied to get the heights in my font sizes list. Did I do this wrong.
Texas Pete

5

The funny thing is that when the header is removed. The "Pest CONtrol " displays as it should.

I’m not seeing this. I removed the cssheader via firebug on your live site and it had no effect so I guessed there was something I was missing.

It’s an empty div that is absolutely positioned and therefore can have no impact on anything else. It’s just not possible for it to affect anything in the way you describe so I feel there is something else going on here.

If cssheader is the background for those elements then you don’t want it absolutely positioned anyway. You want it back in the flow and wrapped around the elements you want it to contain.

The elements inside don’t need to be absolutely placed either and should be back in the flow and positioned with margins. You don’t need to set widths to hold the words you want because that will break as soon as someone resizes the text in the browser. Just set the element to display:inline-block and the borders and backgrounds will hug the words as required.

Layouts need to be logical with one thing flowing to the next so that everything can find its own space naturally and adapt to the flow of the document without specific positioning.