Fluid display: two Divs arranged side by side

Question

I'm trying to place two divs side by side and using the following CSS.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTML is very simple, a wrapper div contains two divs on the left and right.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

I tried many times on StackOverflow and other sites to find a better way, but couldn't find any definite help.

So, at first glance, the code works fine. The problem is that when I increase the width (%), the left div automatically gets padding/margin. So at 65% width the left div has some padding or margin and is not perfectly aligned with the right div, I tried setting the padding/margin to 0 with no success. Secondly, if I zoom in on the page, the right div slides under the left div, which is like a stuttery display.

Note: Sorry, I checked a lot of information. This question has been asked many times but these answers didn't help me. I've explained what the problem was in my case.

I hope this can be resolved.

Thank you.

Edit: Sorry for my HTML problem, there are two "box" divs on the left and right, their padding is in %, so the left side shows more padding due to the larger width. Sorry, the CSS above works perfectly, it displays smoothly and is fixed, sorry for asking the wrong question...

Answer 1

Try a system like this:

.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;
}

If you use margin-left on another div equal to the width of the first div, you can just float one div. This works no matter how much you zoom, and there are no subpixel issues.

Answer 2

Using this CSS for my current website. The effect is perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}