Dwa elementy div obok siebie - Wyświetlanie płynów

Question

Próbuję umieścić dwa elementy div obok siebie i użyć do tego następującego kodu CSS.

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

#right { 
    overflow: hidden; 
} 

Kod HTML jest prosty, dwa elementy div lewy i prawy w opakowaniu div.

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

Próbowałem wiele razy, aby znaleźć lepszy sposób na Stackoverflow i innych witrynach, ale nie mogłem znaleźć dokładnej pomocy.

Tak więc kod działa dobrze na pierwszy rzut oka. Problem polega na tym, że lewy div automatycznie dostaje dopełnienie/margines, gdy zwiększam szerokość w (%). Tak więc, przy szerokości 65%, lewy div ma pewne dopełnienie lub margines i nie jest idealnie wyrównany z prawym div, starałem się padding/margin 0, ale bez powodzenia. Po drugie, jeśli powiększam stronę, prawy div przesuwa się poniżej lewego div, to nie jest płynny wyświetlacz.

Uwaga: Przykro mi, szukałem dużo, to pytanie było wielokrotnie zadawane, ale te odpowiedzi mi nie pomagają, wyjaśniłem, co jest problemem w moim przypadku.

Mam nadzieję, że jest na to poprawka.

Dziękuję.

EDYTOWANIE: Przepraszam, problem HTML, były dwa "pola" divs po obu lewej i prawej stronie, miały dopełnienie w%, więc lewy bok pokazał więcej padding ze względu na większą szerokość. Niestety, powyższe CSS działa doskonały, jego wyświetlacz płynu i stałe, przepraszam za pytanie niewłaściwe pytanie ....

Answer 1

Używanie tego arkusza stylów CSS do bieżącej strony. Działa idealnie!

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

Answer 2

Fiddle

Spróbuj system tak zamiast:

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

wystarczy tylko unosić jeden div jeśli y użyj lewego marginesu na drugim, równego pierwszej szerokości div. To zadziała niezależnie od powiększenia i nie będzie mieć problemów z subpiksem.

Answer 3

Jest to łatwe ze schematu flexbox:

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