Question

I have to add a weather widget to a website whose markup is a total mess (it was converted from a wordpress site using a website copier). I can’t add it to the current structure because it throws everything off, so I wanted to drop it in at the top of the document and use absolute positioning to deal with it. This works to an extent, but it falls short with different resolutions, browsers, etc. If I try relative positioning it pushes the rest of the document down. Any hints on what to research to solve this problem short of reading the css spec?

Update:

I was able to figure out a solution by combining the information that all of you provided along with “%”. I used absolute positioning and set position:absolute;right:28%.

Thank you all for taking the time to answer so quickly.

Answer 1

I disagree with Joseph and Kasturi.

You want position:absolute

div#weather-widget{
  position:absolute;
  top:0px;
  right:0px;
  height:100px;
  width:150px;
}

Maybe setting height, width, font-size, line-height, etc. would help solve your browser inconsistency problems. Also, look into a CSS reset template.

Beyond that, you would really need to post some code for more definitive help.

Reference:

• Learn CSS Positioning in Ten Steps