Positioning div under another div

Question

I need to position a div under another div. I found another question on this topic where they suggested I use a main <div> and the other <div>s as children. I tried to do that but I can't understand if my part of code that doesn't work or I'm doing it wrong.

HTML

<div id="wrapper">
   <div id="uscite" class="block">
      <div id="jp">
         <img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite jappo
      </div>
      <div id="it">
         <img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite ita
      </div>
</div>
<div class="block">
   <a href="https://www.facebook.com/fmpitaly"><img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Facebook" alt="Facebook" /></a>
   <a href="https://twitter.com/FMP_Italy"><img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Twuitter" alt="Twitter" /></a>
</div>

CSS

div#wrapper{
    padding:30px 20px;
    position:absolute;
    right:0;
    border:0px;
}
div#uscite{
    height:35%;
    width:20%;
}
div#jp {
    text-align: center;
    width:50%;
    height:100%;
    float:left;
    border:0px;
}
div#it {
    text-align: center;
    width:50%;
    height:100%;
    float:right;
    border:0px;
}
.block{
    display:block;
}

http://jsfiddle.net/g3do9q0b/

I want a structure like this

Answer 1

super simplified, tested only in chrome(html 5)

<div class="wrapper">
    <div class="inner">
       <div class="column">
          left
       </div>
       <div class="column">
         right
       </div>
    </div> 
    <div class="footer">
       footer
    </div>
</div>

http://jsfiddle.net/g3do9q0b/10/

Answer 2

Marc has an answer using your example, but the approach isn't very clean. What you really want is to think about everything in boxes when you use HTML+CSS. What you want is two boxes stacked on top of each other, but the top box needs to contain two separate ones. E.G.

*----------*
*  1  *  2 *
*     *    *
*----------*
*          *
*     3    *
*          *
*----------*

You want the box containing 1 and 2 to be as wide as 3, and of course, 1 and 2 will be half of that width. Thinking of it this way should simplify the development process.

#bottomDiv {
    height: 400px;
    width: 500px;
    background-color: lightblue;
}

#topDiv {
    width: 500px;
    height: 400px;
}

#leftDiv {
    width: 50%;
    height: 100%;
    background-color: lightgreen;
    float: left;
}
#rightDiv {
    width: 50%;
    height: 100%;
    background-color: orange;
    float: left;
}

<div id="topDiv">
    <div id="leftDiv"> </div>
    <div id="rightDiv"> </div>
</div>
<div id="bottomDiv">
</div>

Answer 3

<div id="content">

  <div class="clear">

    <div id="uscite" class="one_half" style="background:blue">
        your content
    </div>
    <div id="it" class="one_half" style="background:red">
        your content
    </div>

  </div>

  <div style="background:orange">
   your content
  </div>

</div>

#content{width:100%;text-align:center}
.one_half{width:50%;float:left}
.clear{overflow:hidden;display:block}