Div bliver når man scroller - problem når browser er mindre end sidebredden
Hej eksperter.Jeg har en side hvor jeg gerne vil vise nogle links/reklamer for andre områder på min hjemmeside i højre side. Jeg vil gerne have det sådan at når man scroller ned på min side, så bliver links/reklamer på "deres plads"...
Det har jeg prøvet at lave her: http://test.kryger.name/index.html
Det virker også fint og efter hensigten så længe at ens browser er breddere end de 1000 px, som siden er bred. Hvis man har en mindre browser, og man så prøver at scrolle ud til der hvor links/reklamerne skulle være, ja så er de der ikke!!!
Kan nogen hjælpe mig med at få det til at virke efter hensigten (også ved mindre browservinduer)?
Min CSS ser sådan ud:
html, body
{
padding:0;
margin:0;
}
body
{
background-color: #E7E7E7;
}
#wrapper
{
width:100%;
margin: auto;
}
#pagecontainer_menu, #pagecontainer_content
{
width:1000px;
margin: auto;
background-image:url('images/background.png');
}
#sidebar-a_menu, #sidebar-a_content
{
float: left;
width:25px;
}
#sidebar-b_menu, #sidebar-b_content
{
float: right;
text-align: right;
width:250px;
}
#content_menu, #content_content
{
margin-left: 25px;
margin-right: 250px;
text-align: justify;
}
#menu
{
height: 150px;
text-align: left;
position: relative;
background-image: url('images/menu_top_background.png');
background-repeat: repeat-x;
background-position: left top;
}
#sidebar-b_content_stay
{
position: fixed;
top: 170px;
}
/* Primary navigation - START */
#primary_navigation ul
{
padding: 0;
margin: 0;
position: absolute;
bottom: 8px;
}
#primary_navigation li
{
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
text-align: left;
display: inline;
}
#primary_navigation a
{
font-family: Georgia;
font-size: 12px;
letter-spacing: -.5px;
text-transform: uppercase;
padding: 0;
text-decoration: none;
color: #000000;
}
#primary_navigation a:hover, #primary_navigation a.activeitem
{
color: #000000;
padding-bottom: 10px;
}
/* Primary navigation - END */
/* Secondary navigation - START */
#secondary_navigation
{
height: 50px;
text-align: right;
position: relative;
}
#secondary_navigation ul
{
padding: 0;
margin: 0;
position: absolute;
top: 8px;
right: 0;
}
#secondary_navigation li
{
list-style: none;
margin: 0;
padding: 0px 0px 0px 15px;
text-align: right;
display: inline;
}
#secondary_navigation a
{
font-family: Georgia;
font-size: 12px;
padding: 0;
text-decoration: none;
color: #000000;
}
#secondary_navigation a:hover, #secondary_navigation a.activeitem
{
color: #000000;
padding-top: 10px;
}
/* Secondary navigation - END */
#clear_menu, #clear_content, #clear_bottom_links, #clear_footer
{
clear: both;
}
h1, h2, h3, h4, h5, h6
{
margin: 0;
padding: 0;
font-weight: normal;
}
h1
{
font-family: Georgia,Verdana,Helvetica,sans-serif;
font-size: 24px;
font-weight: bold;
color: #126525;
margin-bottom: 15px;
}
h2
{
font-family: Georgia,Verdana,Helvetica,sans-serif;
font-size: 18px;
line-height: 22px;
font-weight: normal;
color: #969696;
}
h3
{
font-family: Verdana,Helvetica,sans-serif;
font-size: 12px;
line-height: 16px;
font-weight: normal;
color: #969696;
}
hr
{
color: #8C8C8C;
background-color: #8C8C8C;
border: 0;
height: 1px;
padding: 0;
margin: 0;
}