Positionate div images without absolute - html

Question

Okay I have a small problem,who I cant solve.
I hope experts will help :)
As you can see I have 3 divs on my index site.
No in the middle is one input who is across header and main div.
And the yellow circles are divs with but images*
About the div images...their code is
The positions are random,not equal as I have done.
HTML and CSS
#container{position:relative;}
.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>
So my problem is when re sizing the windows it will go as the div1,they will go across each other. I need too to make it responsible,but when using mobile,i need them to disapear, and when on smaller displays I need them to adjust their size to display.
Is the positioning okay or should I use float?

Answer 1

Your question is very confusing but I guess that you want is something like this:
In can resize without problems using media queries.
Here is the link of mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
You can also use float:left and position:relative for your divs and position:absolute for your input.
Here is my HTML and CSS code:
.circle {
}
#apple_img {
background:green;
width:100%;
height:100px;
float:left;
position:relative;
}
#weight_img {
background:red;
width:100%;
height:100px;
float:left;
position:relative;
}
#bike_img {
background:blue;
width:100%;
height:100px;
float:left;
position:relative;
}
/* use media query here to other resolutions >768px and <=768px for example */
div > input{
width:200px;
height:200px;
position:absolute;
left:50%;
margin-left:-100px;
top:50px
}
input{
width:200px;
height:200px;
position:relative;
float:left;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
<div><input type="text" value="Type here"></div>
</div>
I guess that your class "circle" is not doing what you want, then I commented it (try used it to check).
For the tags div > input and input you can use the media query to resize correctly your input.
Here is my jsfiddle: http://jsfiddle.net/dhvuakjr/
Ps.: It's position and not positionate like you wrote your class circle
Hope this help you.