positioning div

[jp12]

Hi, I'm trying to get a div to display within the header in a certain position and not move around when someone re sizes their web browser. I'm using position:absolute, when I try relative it doesn't work and expands the widget's height for some reason and I think I have it nested inside of the header and the weather class div but the header isn't a div. it's html 5 tag so maybe that is the reason why the widget-currentscompact div moves around and doesn't stay put?

Here's the code:

#widget-currentscompact {
width:120px;
height:50px;
position:absolute;
top:52px;
right:200px
}

Here's the url for the webpage: http://69.65.18.90/lasallestreetnews.com/

Thank you!

[Excavator]

Hello jp12,
You nest your slideshow in some unnecessary div elements. Have a look at Divitis and how to avoid it.

When positioning an element, you need to decide what is relevant that it's positioned to. Using your existing markup, look how you can position that relative to #wrapper -

 #wrapper {
width: 940px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
border: 3px solid #888;
background: #f5f5f5;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
  position: relative;
}
#basic_slideshow {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 100px;
  left: 0;
}

...............
But, does it really need positioning at all? Maybe it's better just to let the document flow naturally -

er {
width: 940px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
border: 3px solid #888;
background: #f5f5f5;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#basic_slideshow {
  height: 200px;
  width: 940px;
  clear: both;
}

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: #333;