Html 如何使侧边栏正确浮动？

所以这让我发疯。在过去的两天里，我一直在努力让我的侧边栏正确浮动，但它总是出现在页面底部！答案可能很简单，但我似乎无法独自找到答案。。。也许你们中的一个能帮我

#wrap{
宽度：1200px；
/*保证金：0自动*/
背景色：#e6fdff；
颜色：#185358；
填充：0；
}
#内容{
浮动：左；
清楚:对,；
填充：50px；
填充底部：80px；
/*保证金：0自动*/
右：250px；
}
#边栏{
浮动：对；
宽度：300px；
}
#边栏ul{
列表样式：无；
}
#侧栏ul a{
文字装饰：无；
字体系列：'压碎'，草书；
颜色：#4B3C27；
}
#页脚{
宽度：100%；
高度：60px；
位置：固定；
底部：0；
左：0；
边框：1px实心#4B323F；
边框宽度：1px0；
背景色：#E6FDFF；
}

欢迎来到以斯帖的生活！
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。
在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。这是一位杰出的领袖，他是一位伟大的领袖。
但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。
不受时间和解决方案的限制，不受限制，不受限制，不受限制。这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。
在亨德雷特的两个房间里，有一个小房间，一个小房间，一个小房间。

只需将#侧边栏放在#内容之外，并为#内容添加宽度为800px的。

我将您的html更改为：

<div id="content">
                <div id="main-content"> 
                    <h2>Welcome to The Life of Esther!</h2>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
                    </p>
                    </div>
                <div id="sidebar"> 
                    <ul>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                    </ul>
                </div> <!--end sidebar div-->
            </div>

---

你必须在右上属性上打一点球。您还必须设置主内容角色的宽度。

首先，您需要从

内容

div中取出

侧栏

，并修改一些样式。请参阅此处的更新代码

请参阅下面的代码：

<style>
    #wrap { 
        width: 1200px;
        /*margin: 0 auto;*/
        background-color:#e6fdff;
        color:#185358;
        padding:0;
    }
    #content {
        float:left;
        clear:right;
        padding:50px;
        padding-bottom:80px;
        width:900px;
    }
    #sidebar {
        float:right;
        width:150px;
    }
    #sidebar ul {
        list-style:none;
    }
    #sidebar ul a {
        text-decoration:none;
        font-family:'Crushed', cursive;
        color:#4B3C27;
    }
    #footer {
        width:100%;
        height:60px;
        position:fixed;
        bottom:0;
        left:0;
        border:1px solid #4B323F;
        border-width:1px 0;
        background-color:#E6FDFF;
    }
    <style>

#包裹{
宽度：1200px；
/*保证金：0自动*/
背景色：#e6fdff；
颜色：#185358；
填充：0；
}
#内容{
浮动：左；
清楚:对,；
填充：50px；
填充底部：80px；
宽度：900px；
}
#边栏{
浮动：对；
宽度：150px；
}
#边栏ul{
列表样式：无；
}
#侧栏ul a{
文字装饰：无；
字体系列：'压碎'，草书；
颜色：#4B3C27；
}
#页脚{
宽度：100%；
高度：60px；
位置：固定；
底部：0；
左：0；
边框：1px实心#4B323F；
边框宽度：1px0；
背景色：#E6FDFF；
}

和HTML作为

<div id="wrap">
            <!--<div style="clear:both;"></div>-->
            <div id="content">
                <h2>Welcome to The Life of Esther!</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
                </p>
                            </div> <!--end content div-->

    <div id="sidebar"> 
                    <ul>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                    </ul>
                </div> <!--end sidebar div-->

            <div id="footer"></div> <!--end footer div-->
        </div> <!--end wrap div-->

欢迎来到以斯帖的生活！
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。
在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。这是一位伟大的领袖，他是一位伟大的领袖
<div id="wrap">
            <!--<div style="clear:both;"></div>-->
            <div id="content">
                <h2>Welcome to The Life of Esther!</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
                </p>
                            </div> <!--end content div-->

    <div id="sidebar"> 
                    <ul>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                        <li><a href="blog1.html">Blog1</a></li>
                    </ul>
                </div> <!--end sidebar div-->

            <div id="footer"></div> <!--end footer div-->
        </div> <!--end wrap div-->