Two divs side by side - Fluid display [duplicate]
Solution 1:
Try a system like this instead:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
Solution 2:
This is easy with a flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>Solution 3:
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}