Проблемы с вложением CSS div / box и переполнением

Question

Привет, мне просто интересно, кто-нибудь может мне помочь. Я достаточно новичок в веб-дизайне, и у меня есть некоторые проблемы с моим CSS.

По сути, я не могу понять, как правильно вкладывать мои элементы div / box без проблем с переполнением! Я попытался использовать overflow: hidden;, но это все еще не сработало, я также пытался перемещать дочерние элементы влево или вправо, чтобы посмотреть, поможет ли это, но все же не повезло!

Мой CSS выглядит так:

#customerReg {
    width: 47%;
    height: 480px;
    float: left;
    background: #FFF;
    padding: 10px 10px 10px 10px;
    display: inline;
    margin-top: 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    overflow: hidden;
}    

#customerInfo {
    width: 95%;
    height: 120px;
    background: #414141;
    padding: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    overflow: hidden;
}

#participantReg {
    width: 47%;
    height: 480px;
    float: right;
    background: #FFF;
    padding: 10px;
    margin-top: 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    overflow: hidden;   
}

#participantInfo {
    width: 95%;
    height: 120px;
    background: #414141;
    padding: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    overflow: hidden;
}

Мой HTML выглядит следующим образом:

<div class="contentbody" style="border:#FF0066 solid 2px;">

    <div id="customerReg" style="border:#33CC00 solid 2px">
    <div id="customerInfo">
      <p>Customer Registration

      </p>
    </div>

    <!-- End of customerReg --></div>

    <div id="participantReg" style="border:#33CC00 solid 2px">
        <div id="participantInfo">
          <p>Participant Sign Up</p>
          <p>&nbsp;</p>
        </div>

    <!-- End of participantReg --></div>


    <!-- end .contentbody --></div>

То, к чему я стремлюсь, так это иметь две закругленные коробки рядом с двумя меньшими коробками внутри этих коробок. Я пытался опубликовать изображение, но оно не позволило мне! Что я понимаю, так это то, что обе внутренние коробки выливаются на правой стороне внешних коробок, если это имеет смысл ??

Может кто-нибудь сказать мне, где я ошибаюсь, и что я могу сделать, чтобы исправить это, поскольку я часами пытался найти ответ и не смог понять его!

Answer 1

Набор родительских элементов:

• переполнение: скрыто;

ИЛИ

 #customerReg, #participantReg{
     float:left;
 }

 .contentbody:after{
    content: '.';
    clear:both;
    visibility: hidden;
    *zoom:1;
    height:0;
    display:block;
 }

Answer 2

если вы установите ширину первых div боксов бок о бок:

посмотрите это скрипка

.contentbody{ width:990px; border:#FF0066 solid 2px; }