How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/
Question
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.
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; }
<div id="wrapper"> <div id="leftcolumn"> </div> <div id="rightcolumn"> </div> </div>
4 answers
solution1
45 ACCPTED 2013-08-20 21:18:31
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 do the following:
I floated both columns to the left.
Note: I added min-height to each column for illustrative purposes and I simplified your 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; }
<div id="wrapper"> <div id="leftcolumn"> Left </div> <div id="rightcolumn"> Right </div> </div>
If you would like the left column to stay in place as you scroll do the following:
Here we float the right column to the right while adding position: relative; to #wrapper and position: fixed; to #leftcolumn .
Note: I again used min-height for illustrative purposes and can be removed for your needs.
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; }
<div id="wrapper"> <div id="leftcolumn"> Left </div> <div id="rightcolumn"> Right </div> </div>
solution2
6 2013-08-20 21:15:59
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
solution3
1 2016-06-09 04:19:10
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.
solution4
0 2018-02-25 06:37:24
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.