将Divs堆叠在顶部，将另一个Divs堆叠到一边

Question

I am wanting to have several divs stack on top of each other (which I have), but also have another div to the right side of the other group of divs. Right now everything is just stacked on top of each other, even the BeliefDescription div, which needs to be to the right of the rest of them. Thanks for helping.

<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

If you want to let #cat and #BeliefeDescription side by side you have to float both of them and not only #BeliefDescription .

Adding float:left to #Cat will solve you problem, but then you'll have to set an width to it.

Answer 2

Be aware that the float property makes the element float over the element that comes after it. So, either place the #BeliefDescript before the Cat div, and set it to be float:right

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

Or set the float property on the Cat element, and make it float:left;

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

Answer 3

Try this: 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;
}