positioning elements with float?..nothing works

Question

<div class="block1">
<div class="test">
    <div class="about">This is where text about the app will be displayed</div>
</div>
<div class="app1">
<ul>
<li class="roundabout-moveable-item" style="background: url('img/1.png')"></li>
<li class="roundabout-moveable-item" style="background: url('img/2.png')"></li>
<li class="roundabout-moveable-item" style="background: url('img/3.png')"></li>
</ul>
</div>`

CSS:

.topbox {
width:700px;
height:150px;
border-radius:20px;
position:fixed;
-moz-box-shadow:    inset 0px 4px 8px #000000;
-webkit-box-shadow: inset 0px 4px 8px #000000;
box-shadow:         inset 0px 4px 8px #000000;}

.block1 {
width:800px;}

.about {
float:right;
}

I have tried everything, searched stack overflow and I can't seem to get it to work.

Any help is much appreciated thank you!

Answer 1

Try this and change the values for absolute positioning to suit your needs.

.block1 {
  width:800px;
  position: relative;
}

.test {
  width:400px;
  height:300px;
  border-radius: 20px;
  background: transparent;
  width:800px;
  position: absolute;
  top: 200px;
  left: 400px;
}