...

View Full Version : positioning div



jp12
01-20-2013, 06:31 PM
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
01-20-2013, 09:01 PM
Hello jp12,
You nest your slideshow in some unnecessary div elements. Have a look at Divitis and how to avoid it (http://www.apaddedcell.com/div-itis).

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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/) 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;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum