流体ディスプレイ: 2 つの Div を並べて表示

Question

次の CSS を使用して 2 つの div を並べて配置しようとしています。

#left {
  フロート: 左;
  幅: 65%;
  オーバーフロー: 非表示;
}

＃右 {
  オーバーフロー: 非表示;
}

HTML は非常に単純で、ラッパー div には左右に 2 つの div が含まれています。

<div id="wrapper">
  <div id="left">左側の div</div>
  <div id="right">右側の div</div>
</div>

より良い方法を見つけるために StackOverflow や他のサイトで何度も試しましたが、明確な助けは見つかりませんでした。

一見すると、コードは正常に動作します。問題は、幅 (%) を増やすと、左側の div に自動的にパディング/マージンが設定されることです。したがって、65％の幅では、左のdivにいくらかのパディングまたはマージンがあり、右のdivと完全に位置合わせされていません。パディング/マージンを0に設定しようとしましたが、成功しませんでした。次に、ページを拡大すると、右の div が左の div の下に滑り込み、表示が途切れるようになります。

注: 申し訳ありませんが、多くの情報を確認しました。この質問は何度も尋ねられましたが、これらの回答は役に立ちませんでした。私の場合に何が問題なのかを説明しました。

これが解決されることを願っています。

ありがとうございます。

編集: HTML の問題で申し訳ありませんが、左右に 2 つの「ボックス」 div があり、そのパディングは % 単位なので、左側の幅が広いため、より多くのパディングが表示されます。申し訳ありませんが、上記の CSS は完全に機能し、スムーズに表示され、修正されました。間違った質問をして申し訳ありません...

Answer 1

次のようなシステムを試してください:

リーリー リーリー

最初の div の幅と等しい別の div で margin-left を使用すると、1 つの div を浮動させるだけで済みます。これはどれだけズームしても機能し、サブピクセルの問題はありません。

Answer 2

現在の Web サイトにこの CSS を使用しています。効果は完璧です！

リーリー