• 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

0 głosów
66 wizyt
pytanie zadane 12 października 2018 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 2018 przez k.wichura Pasjonat (16,930 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 2018 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 2018 przez Perseusz Obywatel (1,940 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ź 148 wizyt
0 głosów
3 odpowiedzi 2,295 wizyt
pytanie zadane 29 sierpnia 2017 w HTML i CSS przez Ziom Początkujący (300 p.)
0 głosów
4 odpowiedzi 173 wizyt
pytanie zadane 28 marca 2016 w HTML i CSS przez Jarek Jarosz Nowicjusz (190 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

59,149 zapytań

104,559 odpowiedzi

216,353 komentarzy

31,538 pasjonatów

Przeglądających: 290
Pasjonatów: 10 Gości: 280

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.

...