How can I solve this problem with CSS float left? - css-float

Question

I have 3 divs inside a div. When I float them left, they line up side by side. I want to position them for example 500px from top using nth-child in CSS, but then they position themselves on top of each-other. How can solve this problem?
.wrapper{
content:"";
display:block;
clear:both;
}
.sevice p{
margin: 10px 0;
text-align: center;
}
.service{
float: left;
background-color: rgba(255,255,255,0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1){
top: 500px;
}
.service:nth-child(2){
top: 500px;
}
.service:nth-child(3){
top: 500px;
}
<div class="wrapper">
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>

Answer 1

I think I understand what you are saying. You would like them to be positioned side by side, each with the same top value. Floating will position them side by side automatically (if there is room), but if you want to do that with absolute positioning, you need to set both the top and the left values of each element. If you don't set the left value, your elements will all be set all the way to the left. I've revised the snippet below to give an example (and clean up a couple of things).
The general rule is that when you use absolute positioning, you have to specify the x,y coordinates of one of the corners of the element, relative to the analogous corner of its container. To do that, you can use either top or bottom, along with either right or left. So, top and left will position the top left corner of your element relative to the top left corner of the container, bottom and left will do the same with the two bottom left corners, and so on.
If you don't specify, then the values will all be zero, and your element will be in the top left corner of your container. In your case, you didn't specify left or right, so all three elements were positioned at left: 0. In other words, they were all on top of each other as you observed.
/* Don't need any of this
.wrapper{
content:"";
display:block;
clear:both;
}
*/
.service p { /* You had ".sevice p," which is why you didn't get centering */
/* margin: 10px 0;
Don't really need margin with absolute positioning, just change top/left
values to make adjustments to position */
text-align: center;
}
.service {
/* float: left; don't need this any more */
top: 500px; /* put this here if it's the same for all of them */
background-color: rgba(255, 255, 255, 0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1) {
left: 0px;
/* here */
}
.service:nth-child(2) {
left: 27%;
/* here */
}
.service:nth-child(3) {
left: 54%;
/* and here */
}
<div class="wrapper">
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>