我如何让一个div围绕另一个div？

Question

I have 3 boxes on my site that i would like to clear. Here is the website the boxes on the bottom are what I would like to have clear. If anyone has any ideas i would love to hear them.

Thanks for your help!

EXAMPLE | http://www.sevwebdesign.com

How I want it to look: www.sevwebdesign.com/graphics/site_layout.jpg

HTML

 <div id="left-info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br><br>
            </p>
          </div>
    </div>
    <div id="mid-info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br>
            </p>
          </div>
    </div>

    <div id="right-info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            </p>
          </div>
    </div>

CSS

.info-bar-title{
    color:#fff;
    text-align:center;
    font-family: 'Carrois Gothic', sans-serif;
    font-size:25px;
    margin-top:0px;
    margin-bottom:0px;
}
#left-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-left:100px;
    float:left;
}
#mid-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin:0px auto;
    align-content:center;

}
#right-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-right:100px;
    float:right; clear:left;
}
.info-inter {
    color:#000;
    background-color:rgba(255,255,255,1.00);
    border-radius:8px;
    padding:3px;
}
.info-words {
    text-align:center;
}

Answer 1

I checked the website you posted and i see the last info box was not aligned properly, maybe the clear you mean is to align those box properly.

I created a fiddle but I might misunderstood your question but check this out.

Fiddle

I changed some of the mark ups. just edit it later.

HTML

<div class="info-wrapper">
    <div class="info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br/><br/><br/><br/><br/>
            </p>
          </div>
    </div>
    <div class="info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **</p>
                <br/><br/><br/><br/><br/>

          </div>
    </div>

    <div class="info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            </p>
          </div>
    </div>
</div>

CSS

.info-wrapper{
    width:1100px;
}
.info-bar-title{
    color:#fff;
    text-align:center;
    font-family: 'Carrois Gothic', sans-serif;
    font-size:25px;
    margin-top:0px;
    margin-bottom:0px;
}
.info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    float:left;
    margin-right:50px;
}
.info-inter {
    color:#000;
    background-color:rgba(255,255,255,1.00);
    border-radius:8px;
    padding:3px;
}
.info-words {
    text-align:center;
}

Answer 2

For starters wrap these three boxes in a div ID such as a footer: We also will use the same stylings for each box so we will rename the footer-box and use CLASSES instead as there is more than 1 on the page.

<div id="footer">
<div class="footer-box">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br><br>
            </p>
          </div>
    </div>
    <div class="footer-box">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br>
            </p>
          </div>
    </div>

    <div class="footer-box">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            </p>
          </div>
    </div>
</div>

Now you want to style your footer to be centered on the page.

#footer{
 width:960px;
 margin:auto;
 padding:0px; //Dont want any extra or inherent padding
}

This is based on your other elements being a width of 960.

In the footer div then we will align our boxes.

.footer-box {
background-color: #629B5D;
border: solid 5px #629B5D;
border-radius: 8px;
width: 300px;
margin-left: 20px;
float: left;
}

You then see they all float left ontop of eachother and they are all the same width etc. The layers are cleaner.

Answer 3

I tried your code in JSFIDDLE.

Check this code: (JSFIDDLE Resource: http://jsfiddle.net/qZaEZ/ )

#left-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-left:100px;
    float:left;
}
#mid-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-left: 50px;
    float:left;

}
#right-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-right:100px;
    float:right;
}

Is this what you mean by clearing the boxes? Aligning them at the bottom? Hope this helps.