• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dwa DIVy obok siebie - dobasowanie szerokości

Konferencja JOIN! 2018
0 głosów
48 wizyt
pytanie zadane 12 października w HTML i CSS przez fotoman Nowicjusz (120 p.)

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

 

1 odpowiedź

0 głosów
odpowiedź 12 października przez k.wichura Stary wyjadacz (14,170 p.)

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

komentarz 12 października przez fotoman Nowicjusz (120 p.)
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ę
komentarz 12 października przez Perseusz Obywatel (1,780 p.)

@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...

Podobne pytania

0 głosów
1 odpowiedź 117 wizyt
0 głosów
3 odpowiedzi 1,422 wizyt
pytanie zadane 29 sierpnia 2017 w HTML i CSS przez Ziom Początkujący (300 p.)
0 głosów
4 odpowiedzi 159 wizyt
pytanie zadane 28 marca 2016 w HTML i CSS przez Jarek Jarosz Nowicjusz (190 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

55,269 zapytań

99,579 odpowiedzi

204,900 komentarzy

27,239 pasjonatów

Przeglądających: 165
Pasjonatów: 0 Gości: 165

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...