hi,
I am trying to position my divs,like the google maps and and contact info I want them to scroll when i make the page smaller, like in the float element, but this doesn't work and i can't find the problem...
<body>
<div id="header">
<div id="logo">
b
</div>
<hr>
<div id="menu">
<a href="#" onClick="Animate2id('#c1'); return false">home</a>
<a href="#" onClick="Animate2id('#c2','easeOutQuint'); return false" >assortiment</a>
<a href="#" onClick="Animate2id('#c3','easeOutQuint'); return false" >boeket v/d week</a>
<a href="#" onClick="Animate2id('#c4','easeOutQuint'); return false" >bestellingen</a>
<a href="#" onClick="Animate2id('#c5','easeOutQuint'); return false" >contact</a>
</div>
</div>
<div id="container">
<div id="c1">
<div class="content">
<div id="myslides">
<img src="images/capitol.jpg"/>
<img src="images/countryscene.jpg"/>
<img src="images/flowers.jpg"/>
</div>
</div>
</div>
<div id="c2">
<div class="assortiment">
<div id="creaties">
<ul>
<li><a href="boeket.html" >Boeketten</a></li>
<li><a href="trouw.html" >Trouw</a></li>
<li><a href="rouw.html">rouw</a></li>
</ul>
</div>
</div>
</div>
<div id="c3">
<div class="boeket">
<p>
</p>
</div>
</div>
<div id="c4">
<div class="bestellingen">
<p>
</p>
</div>
</div>
<div id="c5">
<div class="contact">
<p>bloemen
<br />openingsuren:
<br />di-zat 8u30-11u45 & 13u30 - 18u 30
<br />zo 9u tot 11u45
</p>
</div>
<div id="map">
<iframe width="425" height="350" frameborder="" scrolling="no" marginheight="0" marginwidth="0" src= "http://maps.google.be/maps?hl=nl&client=safari&q=dadizeelsestraat+17+moorslede&ie=UTF8&hq=&hnear=Dadizeelsestraat+17,+8890+Moorslede,+West-Vlaanderen,+Vlaams+Gewest&gl=be&ll=50.891118,3.060637&spn=0.008988,0.021994&t=m&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.be/maps?hl=nl&client=safari&q=dadizeelsestraat+17+moorslede&ie=UTF8&hq=&hnear=Dadizeelsestraat+17,+8890+Moorslede,+West-Vlaanderen,+Vlaams+Gewest&gl=be&ll=50.891118,3.060637&spn=0.008988,0.021994&t=m&z=14&source=embed"
style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small>
</div>
</div>
</div>
<div id="footer">
</div>
<script>
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=1500; //set animation speed
var $container=$("#container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}
</script>
</body>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*reset*/
html,body{
margin: 0px;
padding: 0px;
height: 100%;
background-color: #66b402;
}
body{
overflow: hidden;
background-color: #66b402;
text-align: center;
}
#container{
position: relative;
left: 0;
width: 10000px;
top: 0;
height: 100%;
}
#header{
text-align: center;
background-color: #66b402;
height: 120px;
position: relative;
}
#footer{
background-color: #323234;
width: 960px;
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
}
#menu{
position: relative;
z-index: 2;
clear :both;
list-style: none;
display: inline;
text-align: center;
}
#menu a{
font-family: 'BelleroseLight';
text-decoration: none;
color: #edf0f5;
font-size: 30px;
margin-left: 40px;
letter-spacing: 2.8px;
}
#c1,#c2,#c3,#c4,#c5,#c6 {
width:1500px;
height:100%;
float:left;
margin-right:100px;
background:#66b402;
}
#logo{
font-family:'Freehand575BTRegular';
font-size: 106px;
color: #323234;
text-align:center;
padding-top: 13px;
}
#Homeslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#Homeslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0 ;
}
#map{
float: left;
width: 100%;
height: 100%;
clear: left;
}
.content{
padding:60px 20px;
}
.assortiment{
font-family:'ClementePDacExtraLight';
color: #edf0f5;
font-size: 18px;
text-align: justify;
letter-spacing: 1.3px;
line-height: 25px;
margin-top: 150px;
margin-left: 120px;
}
.boeket{
font-family:'ClementePDacExtraLight';
color: #edf0f5;
font-size: 18px;
text-align: justify;
letter-spacing: 1.3px;
line-height: 25px;
margin-top: 150px;
margin-left: 120px;
}
.bestellingen{
font-family:'ClementePDacExtraLight';
color: #edf0f5;
font-size: 18px;
text-align: justify;
letter-spacing: 1.3px;
line-height: 25px;
margin-top: 150px;
margin-left: 250px;
}
.contact{
font-family:'ClementePDacExtraLight';
color: #edf0f5;
font-size: 18px;
text-align: justify;
letter-spacing: 1.3px;
line-height: 25px;
margin-top: 150px;
margin-left: 130px;
float: left;
}
hr{
color: #323234;
background-color: #323234;
width: 100%;
height: 3px;
tex-align: center;
border: none;
top: 99.5px;
position: absolute;
}
