Css 在容器分区中并排浮动2列

我尝试在about页面上并排浮动两列，分别称为column_l和column_r，但我遇到的问题是，它会移动并弄乱页脚，并挂在容器div之外

l列包含公司信息，r列包含图片

我将显示我的代码，但基本上，主体包含一个容器，我已将所有代码放在其中

为此，我创建了一个包含这两列的包装器

    body{
    background-image:url('../img/small_logo.jpg');
    background-repeat:repeat;
    position:relative;
    background-position:50% 50%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    /*padding-left:25px;
    padding-right:25px;*/
    overflow:visible;
    margin:0px auto;
    background-attachment:fixed;
    min-height:100%; 
    width:100%;
    /* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;*/
    }
#container{
    margin: auto;
    padding:10px;
    background-color:#F5F5DC;
    width:720px;
    border:2px black solid;
    position:relative;
    background-attachment: scroll;
    display:block;
    height:auto;
    margin-bottom:10px;
    padding-bottom:15px

}
#logo{ margin:0;
padding:auto;
position: inherit;
display:block;
height:auto;
width:auto;
}
#wrapper{margin:auto; height:auto; width:100%;}
#column_l {
    width: 60%;
    margin: 0;
    padding: 0;
    background-color: #FFFF99;
    float:left;
}
#column_r {
    width: 40%;
    margin: 0;
    margin-right:0px;
    float: right;
    background-color: #FFFF99;
    position: absolute;
    left:60%;

}

#column_r p {
    font-size: 11px;
    margin: 7px;
}

#nav{
    background-color: #800000;
    margin-left: 0px;
    text-align: center;
    border-top: 2px solid #800000;
    border-bottom: 2px solid #800000;
    padding:10px 0 10px 0;
    font-family:"Buxton Sketch";
    font-size:16px;
}
#rightContainer{
float:right;
margin:0;
padding:0;
border:2px solid;
width:25%;
height:400px;

}
th{font-size:large;
}
#footer{
    margin-left:0;
    padding:10px 0 10px 0;
    text-align:center;
    opacity:0.6em;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    height:40px;
    vertical-align:bottom;
    font-family:"Buxton Sketch";
    font-size:16px;

    }

#copyright{
    margin:auto;
    padding:3px;
    text-align:center;

}
#copyright p{
font-size: 12px;
  color:#000000;

}
#fb {padding:2px;margin:auto; float:left; }

/* Styles for Navigation */
#nav ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
}
#nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 3px;
    padding: 5px;
    display: inline;

}
#nav a:hover {
    border: 1px solid #456;
    background-color: #F0E68C;
    font-size:large;
    color:black;
}
/* Styles for Footer */
#footer ul {
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 5px;
    padding-top:5px;
}
#footer li {
    float: left;
}
#footer a {
    color: black;
    text-decoration: none;
    margin-top: 0px;
    padding-top: 5px;
    display: inline;

}
#footer a:hover {
    border: 1px solid ;
    background-color: #F0E68C;
    font-size:medium;
}

/*Classes */
.largehead h1{font-size:x-large;}
.shadow:before,
        .shadow:after {
            content:"";
            position:absolute;
            z-index:-2;
        }

        .shadow p {
            font-size:16px;
            font-weight:bold;
        }
        .shadow img {
            font-size:16px;
            font-weight:bold;
        }

/* Shadow Style */
.shadow {
 -moz-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;    /*   For Older Versions    */
        -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;  
        box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;   

        /*                   For  'IE'                                */

        filter:
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5)   /*  Top     */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3)    /*  Right   */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3)   /*  Bottom  */
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/*  Left    */
    }
        -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;  
        box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;   

        /*                   For  'IE'                                */

        filter:
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5)   /*  Top     */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3)    /*  Right   */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3)   /*  Bottom  */
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/*  Left    */
    }
/* Rotated box*/

        .rotated {
            -webkit-box-shadow:none;
               -moz-box-shadow:none;
                    box-shadow:none;
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .rotated > :first-child:before {
            content:"";
            position:absolute;
            z-index:-1;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px;
                 border-radius:4px;
        }

        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
                -ms-transform:rotate(3deg);
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }

 /* Curled corners */

        .curled {
            border:1px solid #efefef;
            -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
                 border-radius:0 0 120px 120px / 0 0 6px 6px;
        }

        .curled:before,
        .curled:after {
            bottom:12px;
            left:10px;
            width:50%;
            height:55%;
            max-width:200px;
            max-height:100px;
            -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
               -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
                    box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            -webkit-transform:skew(-8deg) rotate(-3deg);
               -moz-transform:skew(-8deg) rotate(-3deg);
                -ms-transform:skew(-8deg) rotate(-3deg);
                 -o-transform:skew(-8deg) rotate(-3deg);
                    transform:skew(-8deg) rotate(-3deg);
        }

        .curled:after {
            right:10px;
            left:auto;
            -webkit-transform:skew(8deg) rotate(3deg);
               -moz-transform:skew(8deg) rotate(3deg);
                -ms-transform:skew(8deg) rotate(3deg);
                 -o-transform:skew(8deg) rotate(3deg);
                    transform:skew(8deg) rotate(3deg);
        }
        dl.border-around
{
    margin: 2em 0;
    padding: 0;
    width: 20em;
    float:right;
}

.border-around dt
{
    background-color: #131210;
    color: #959289;
    padding: .5em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    border-left: 1px solid #131210;
    border-right: 1px solid #131210;
    border-top: 1px solid #131210;

}

.border-around dd
{
    margin: 0 0 1em 0;
    background: #DBD8D8;
    text-align: center;
    padding: 1em .5em;
    font-style: italic;
    border-left: 1px solid #131210;
    border-right: 1px solid #131210;
    border-bottom: 1px solid #131210;

}

div.wrapperleft{
    float:left;
    position:relative;

    }
}
    div.wrapper{  
        float:right; /* important */  
        position:relative; /* important(so we can absolutely position the description div */  
    }  
    div.description{  
        position:absolute; /* absolute position (so we can position it where we want)*/  
        bottom:0px; /* position will be on bottom */  
        left:0px;  
        width:60%;  
        /* styling bellow */  
        background-color:black;  
        font-family: 'tahoma';  
        font-size:15px;  
        color:white;  
        opacity:0.6; /* transparency */  
        filter:alpha(opacity=60); /* IE transparency */  
    }  
    p.description_content{  
        padding:0px;  
        margin:0px;  
    }  

        /*Feedback*/
form {float:left; width:50%; text-align:left; padding-top:30px;color:white; margin-left:200px; list-style:none;}
textarea {border:0; padding-top:0px; font-family:"Lucida Console";}
input {border:0; padding:0; font-family:"Lucida Console";}
submit {border:0; padding:0; font-family:"Lucida Console";}
label {border:0; padding:0; font-family:"Lucida Console";}
label {float:left; width:150px; text-align:right; display:block;margin-top:5px;}
textarea {border:1px gray solid; margin-left:10px; padding:5px;}
input, datalist {border:1px gray solid; margin-left:10px; padding:5px;}
input {width:280px; margin-bottom:16px;}
textarea {width:280px; height:150px; text-align:justify; margin-bottom:16px;}

#feedback {padding-top:10px; margin-right:100px;}

对于html：

 <body > <!-- START BODY -->
<!-- START CONTAINER -->
    <div id="container" class="shadow lifted"> 
        <div id="logo">  <!-- START LOGO -->
            <img src="img/cropped_logo.jpg" alt="logo" width=720px height=300px />
        </div> <!-- END LOGO -->
        <!-- START NAV-->
    <div id="nav" class="shadow">
        <a href="index.html" > Home</a>
        <a href="menu.html"> Menu</a>
        <a href="wholesale.html">Wholesale</a>
        <a href="story.html">Our Story</a>
        <a href="contact.html">Contact Us</a>
    </div> <!-- END NAV-->
    <div id="wrapper">
    <!-- Begin Left Column -->
        <div id="column_l">
            <h1>Our Story</h1>
            <p> What started out as making ice cream for family and friends, in our home kitchen, quickly flourished into a labor of love and creativity for ice cream aficionado Hugh Balthrop. "For me, ice cream is all about real flavor using natural and local ingredients. This is where the passion is for me. Ice cream brings out the inner kid in everyone". Ever had Sweet Potato Ice Cream with candied pecans? What about lemon sweet tea sorbet? Wild Blueberry Frozen Yogurt? Blackberry or Watermelon Sorbet? The list goes on and on... Where can you find it, you ask? Right now, you can grab some at Oxbow Restaurant, in Clarksdale, MS, Mississippi Grounds and Cleveland Country Club in Cleveland, MS, Delta Bistro and TurnRow Books, in Greenwood, MS.</p>
        </div><!-- End Left Column -->
<!-- Begin Right Column -->
        <div id="column_r">
            <img alt="" height="288" src="img/hugh.jpg" width="193" />
            <p>Hugh Balthrop</p>
        </div><!-- End Right Column -->
        </div><br> <!--end wrapper-->






    <div id="footer" class="shadow lifted">
        <div class="fb-like" data-href="https://www.facebook.com/pages/Sweet-Magnolia-Ice-Cream-Co/303952586284264?fref=ts" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" clear:both></div>


            <a href="index.html">Home</a>
            <a href="menu.html"> Menu</a>
            <a href="wholesale.html">Wholesale</a>
            <a href="story.html">Our Story</a>
            <a href="contact.html">Contact Us</a>
    </div> <!-- end of footer -->
        <div id="copyright" class="lifted">
            <p id="copyright">Sweet Magnolia Ice Cream Company &copy; 2013. All Rights Reserved.</p>
        </div>
</div> <!-- End of Container -->

</body>

</html>

我们的故事
最初是在家里的厨房里为家人和朋友做冰淇淋，很快就发展成了冰淇淋爱好者休·鲍斯洛普（Hugh Balthrop）热爱和创造力的工作。“对我来说，冰激凌是用天然和当地的原料做成的真正的口味。这就是我的激情所在。冰激凌激发了每个人内心的童趣。”。吃过甜土豆冰淇淋配蜜饯山核桃吗？柠檬甜茶冰糕怎么样？野生蓝莓冷冻酸奶？黑莓还是西瓜冰糕？清单上还有很多。。。你问，你在哪里能找到它？现在，你可以在密西西比州克拉克斯代尔的Oxbow餐厅和密西西比州克利夫兰的克利夫兰乡村俱乐部、密西西比州格林伍德的Delta Bistro和TurnRow Books买一些

休·鲍斯洛普



甜木兰冰淇淋公司©；2013版权所有

---

我试着用left:60%将列推过来，但现在它覆盖了页脚。

您忘记清除浮动了

加

它将解决这个问题。

添加

float:left; 

到#wrapper，CSS类将使外部包含的div扩展以保存文章的内容

---

还有一些遗留下来的风格问题，你将不得不处理，但希望这能让你走上正轨；到页脚css样式，应该做的把戏

你有可能设置一把小提琴来说明你的问题吗？我已经这样做了，它起了作用，但现在我正试图让div fb工作，以便它显示在页脚中。我没有看到facebook插件的javascrip代码……你忘了添加它了吗？

float:left;