Dwa DIVy obok siebie - dobasowanie szerokości

Question

Witam,

mam następujący problem, z którym nie mogę sobie poradzić,

posiadam dwa BOXy DIV, które chcę ustawić obok siebie na całą szerokość strony, pierwszy SIDEBAR ma służyć jak o stałe menu lewej stronie ze stałą szerokością 315px. Drugi RIGHTBAR ma zawierać resztę treści strony, podzielony ma być na mniejsze DIVy z treścią.

Problemem jest to, że nie wiem jaką ustawić wartość w szerokości drugiego DIVa, jak daję procentowo np. na 100%, to automatycznie przeskakuje box na dół pod tym SIDEBAR.

Jak dam 83%, to się mieści obok, ale jak zmniejszę okno przeglądarki, to i tak przeskakuje na dół, bo wiadomo że lewe menu się nie skaluje i ma stałą szerokość.

Jakiego parametru mogę użyć, żeby mi to zadziałało i przy zwężaniu okna przeglądarki, prawy DIV się odpowiednio skalował do pozostałej szerokości strony.

Dziękuję za poradę.

#sidebar
{
	float:left;
	width: 17%;
	width:315px;
	min-height:620px;
	text-align:center;
	background-color:#888888;
}

#rightbar
{
	width:83%;
	float:left;
}

 

Answer 1

Flexbox.

container {
display:flex;
}
.sidebar {
width:315px;
}
.rightbar {
width:100%;
}

<div class="container">
<div class="sidebar">

</div>
<div class="rightbar">

</div>
</div>

ps. Nie stylujemy po ID

Comments

Dziękuję za szybką reakcję,

już tłumaczę się z ID, z kursów MZ, wywnioskowałem, że ID stosuje się dla głównych elementów strony które występują tylko raz na całej stronie, moje menu po lewej występuje raz i content po prawej też raz, dlatego pozwoliłem sobie użyć ID. Oczywiście mogę to zmienić jeśli źle wywnioskowałem z kursów.

Co do Twojej podpowiedzi, jest fajnie, ale tylko częściowo, mianowicie, prawy DIV już nie zeskakuje na dół, co jest sukcesem, jednak menu po lewej czyli SIDEBAR wraz ze zmniejszaniem szerokości, nie trzyma 315px, ale także zmniejsza szerokość. Ja potrzebuję żeby mi ją utrzymywał na 315px cały czas. Czy jest w ogóle taka możliwość ?

Dziękuję

---

@fotoman spróbuj z

flex-shrink: 0;

dla SIDEBAR

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-11

 

edit: formatowanie chyba...