如何使用浮动，清除和溢出元素并排固定位置div并排对齐两个div

So I've been trying to align two divs side by side without overlapping. I have one div which will be fixed as a sidebar and the right div as the content. Hopefully, someone can help me.

所以我一直试图将两个div并排排列而不重叠。我有一个div，它将被固定为侧边栏，右边div作为内容。希望有人可以帮助我。

HTML:

HTML：

<div id="wrapper">
    <div id="leftcolumn">
    </div>
    <div id="rightcolumn">
    </div>
</div>

CSS:

CSS：

body {
     background-color: #444;
     margin-top: 0;
     margin-bottom: 0;
}

#wrapper {
     width: 1005px;
     margin: 0 auto;
     padding: 0;
     overflow: auto;
}

#leftcolumn {
     width: 250px;
     background-color: #111;
     padding: 0;
     margin: 0;
     display: block;
     border: 1px solid white;
     position: fixed;
}

#rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     float: left;
     border: 1px solid white;
}

4 个解决方案

#1

This answer may have to be modified depending on what you were trying to achieve with position: fixed;. If all you want is two columns side by side then simply do the following:

这个答案可能需要根据您尝试通过位置实现的方式进行修改：fixed;。如果你想要的只是两列并排，那么只需执行以下操作：

http://jsfiddle.net/8weSA/1/

I simply floated both columns to the left. I added min-height to each column for illustrative purposes.

我简单地将两列向左浮动。为了说明的目的，我为每列添加了最小高度。

HTML

HTML

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

CSS - you'll notice I simplified your CSS

CSS - 你会注意到我简化了你的CSS

body {
    background-color: #444;
    margin: 0;
}    
#wrapper {
     width: 1005px;
     margin: 0 auto;
}
#leftcolumn, #rightcolumn {
    border: 1px solid white;
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 250px;
     background-color: #111;
}
#rightcolumn {
     width: 750px;
     background-color: #777;
}

If you would like the left column to stay in place as you scroll do the following:

如果您希望在滚动时左列保持原位，请执行以下操作：

http://jsfiddle.net/8weSA/2/

Here we float the right column to the right while adding position: relative; to #wrapper and position: fixed; to #leftcolumn. I again used min-height for illustrative purposes and can be removed for your needs.

这里我们向右浮动右列，同时添加position：relative; #wrapper和position：fixed;到#leftcolumn。我再次使用min-height用于说明目的，可以根据您的需要将其移除。

CSS

CSS

body {
    background-color: #444;
    margin: 0;
}
#wrapper {
    width: 1005px;
    margin: 0 auto;
    position: relative;
}
#leftcolumn, #rightcolumn {
    border: 1px solid white;
    min-height: 750px;
    color: white;
}
#leftcolumn {
    width: 250px;
    background-color: #111;
    min-height: 100px;
    position: fixed;
}
#rightcolumn {
    width: 750px;
    background-color: #777;
    float: right;
}

#2

Try this:

尝试这个：

<div id="wrapper">
    <div class="float left">left</div>
    <div class="float right">right</div>
</div>

#wrapper {
   width:500px; 
   height:300px; 
   position:relative;
}

.float {
   background-color:black; 
   height:300px; 
   margin:0; 
   padding:0; 
   color:white;
}

.left {
   background-color:blue; 
   position:fixed; 
   width:400px;
}

.right {
   float:right; 
   width:100px;
}

jsFiddle: http://jsfiddle.net/khA4m

jsFiddle：http：//jsfiddle.net/khA4m

#3

I did this:

我这样做了：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AutoDealer</title>
        <style>
        .container{
            width: 860px;
            height: 1074px;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid red;

        }
        .nav{

        }
        .wrapper{
            display: block;
            overflow: hidden;
            border: 1px solid green;
        }
       .otherWrapper{
            display: block;
            overflow: hidden;
            border: 1px solid green;
            float:left;
        }
    .left{
        width: 399px;
        float: left;
        background-color: pink;
    }
            .bottom{
        clear: both;
        width: 399px;
        background-color: yellow;



    }
    .right{
        height:350px;
        width: 449px;
        overflow: hidden;
        background-color: blue;
        overflow: hidden;
        float:right;
    }

    </style>
</head>
<body>
    <div class="container">
        <div class="nav"></div>
        <div class="wrapper">
        <div class="otherWrapper">
            <div class="left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
            </div>
             <div class="bottom">
                <p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
             </div>

             <div class="right">
                <p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
             </div>
        </div>
    </div>
</body>

So basically I just made another div to wrap the pink and yellow, and I make that div have a float:left on it. The blue div has a float:right on it.

所以基本上我只是制作了另一个div来包裹粉红色和黄色，我让那个div有一个浮动：留在它上面。蓝色div有一个浮动：就在它上面。

#4

Your code is correct. Kindly mark small correction.

你的代码是正确的。请注意小修正。

#rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     **float: left;(wrong)**
     **float: right; (corrected)**
     border: 1px solid white;
}

#1