Stack Divs сверху друг друга с другим Div на сторону

Question

Я хочу, чтобы несколько divs складывались друг на друга (что у меня есть), но также имеют другой div в правой части другой группы div. Прямо сейчас все просто укладывается друг на друга, даже веером BeliefDescription, который должен быть справа от остальных. Спасибо за помощь.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

<div id="Cat"> 
    <div id="God" class="BeliefCat">God</div> 
    <div id="Jesus" class="BeliefCat">Jesus Christ</div> 
    <div id="HolySpirit" class="BeliefCat">Holy Spirit</div> 
    <div id="Bible" class="BeliefCat RemainingCat">The Bible</div> 
    <div id="Man" class="BeliefCat RemainingCat">Man</div> 
    <div id="GodsRelationship" class="BeliefCat RemainingCat">God's Relationship to His Creation</div> 
    <div id="Salvation" class="BeliefCat RemainingCat">Salvation</div> 
    <div id="SavedWho" class="BeliefCat RemainingCat">Who Can Be Saved?</div> 
    <div id="Perseverance" class="BeliefCat RemainingCat">Perseverance</div> 
    <div id="GospelOrd" class="BeliefCat RemainingCat">Gospel Ordinances</div> 
    <div id="Resurrection" class="BeliefCat RemainingCat">Resurrection</div> 
    <div id="ChurchGov" class="BeliefCat RemainingCat">Church Government</div> 
    <div id="SecondComing" class="BeliefCat RemainingCat">Christ's Second Coming</div> 
    <div id="Missions" class="BeliefCat RemainingCat">Missions</div> 
</div> 

<div id="BeliefDescription"> 
    HELLO 
</div> 

.BeliefCat 
{ 
    border: 1px solid black; 
    width: 33%; 
    height:25px; 
    text-align:center; 
    font-weight:bold; 
} 

#Cat 
{ 
    margin-top:20px; 
} 

#BeliefDescription 
{ 
    float:left; 
} 

Answer 1

Try это: http://jsfiddle.net/9rcs4v1c/3/

.BeliefCat 
{ 
    border: 1px solid black; 
    width: 100%; 
    height:25px; 
    text-align:center; 
    font-weight:bold; 
} 

#Cat 
{ 
    float: left; 

} 

#BeliefDescription 
{ 
    float:left; 
} 

Answer 2

Если вы хотите, чтобы #cat и #BeliefeDescription бок о бок, вы должны плавать оба из них и не только #BeliefDescription.

Добавление-#Cat решит проблему, но тогда вам придется установить для нее ширину.

Answer 3

Знайте, что свойство float заставляет элемент плавать над элементом, который приходит после. Таким образом, либо поместить #BeliefDescript до того, как Cat DIV, и установить его, чтобы быть float:right

http://jsfiddle.net/1tLfaryk/1/

Или установите float свойство на Cat элемент и сделать его float:left;

http://jsfiddle.net/1tLfaryk/2/