Hai div cạnh nhau - Hiển thị chất lỏng

Question

Tôi đang cố gắng đặt hai div cạnh nhau và sử dụng CSS sau cho nó.

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

#right { 
    overflow: hidden; 
} 

HTML đơn giản, hai div trái và phải trong div trình bao bọc.

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

Tôi đã thử rất nhiều lần để tìm kiếm một cách tốt hơn trên Stackoverflow và các trang web khác nữa, Nhưng không thể tìm thấy trợ giúp chính xác.

Vì vậy, mã hoạt động tốt trong nháy mắt đầu tiên. Vấn đề là điều này, rằng div bên trái được padding/margin tự động khi tôi tăng chiều rộng trong (%). Vì vậy, ở độ rộng 65%, div bên trái có một số đệm hoặc lề và không hoàn toàn phù hợp với div bên phải, tôi đã cố gắng để đệm/lề 0 nhưng không có may mắn. Thứ hai, nếu tôi phóng to trang, div bên phải sẽ trượt bên dưới div bên trái, Màn hình không giống như chất lỏng của nó.

Lưu ý: Tôi xin lỗi, tôi đã tìm kiếm rất nhiều, câu hỏi này đã được hỏi nhiều lần nhưng những câu trả lời đó không giúp tôi, tôi đã giải thích vấn đề gì trong trường hợp của tôi.

Tôi hy vọng có sự khắc phục cho điều đó.

Cảm ơn bạn.

EDIT: Xin lỗi, tôi vấn đề HTML, Có hai "hộp" divs ở cả hai bên trái và bên phải, Họ có đệm trong%, Vì vậy, bên trái cho thấy padding hơn vì chiều rộng lớn hơn. Xin lỗi, CSS trên hoạt động hoàn hảo, màn hình chất lỏng của nó và cố định, Xin lỗi vì đặt câu hỏi sai ....

Answer 1

Sử dụng CSS này cho trang web hiện tại của tôi. Nó hoạt động hoàn hảo!

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

Answer 2

Fiddle

Hãy thử một hệ thống như thay vì điều này:

HTML:

<section class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</section> 

CSS:

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

Bạn chỉ cần nổi một div nếu y sử dụng margin-left trên khác bằng với chiều rộng của div đầu tiên. Điều này sẽ làm việc không có vấn đề gì thu phóng và sẽ không có vấn đề về pixel phụ.

Answer 3

Đây là cách dễ dàng với một flexbox:

#wrapper { 
    display: flex; 
} 
#left { 
    flex: 0 0 65%; 
} 
#right { 
    flex: 1; 
}