CODEWITHSUNDEEP
css
user185320
user185320

Reputation: 103

css - add and position a div without disturbing the rest of the document

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.

Upvotes: 1

Views: 3866

Answers (3)

JohnB
JohnB

Reputation: 19002

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:

Upvotes: 2

Kasturi
Kasturi

Reputation: 3333

Position: fixed is what you are looking for... it doesnt disturb the rest of the document.... and you might need z-index to pop it on the front ....

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78540

This definitely needs a positioning attribute and I would suggest fixed. The only other option of taking it "out of flow" is to float it, but that could get messy.

so without further ado:

{
    position:fixed;
    top:0px;
    right:0px; /* or whatever */
}

And that's what I'd do anyhow :P

Upvotes: 1

Related Questions