Jak zrobić aby tło czerwone nie nachodziło na to szare z prawej strony

Question

Hej, wiem słabo opisałem tytuł ale nie wiedziałem jak to opisać dlatego dodam obrazki wraz z kodem może ktoś będzie w stanie mi pomóc.

Ogólnie całość wygląda tak

Chciałbym zrobić tak aby to czerwone main nie było pod szarym .right tylko aby się kończyło przy nim. Tak jak by w tym miejscu nie mogło nic być tak jak by to były osobne bloki.

Dodaje kody

.

/.right "to szare"/

.right {
    width: 260px;
    height: 100vh;
    background: rgba(0,0,0,.3);
    position: relative;
    float: right;
}

/main "to czerwone"/

main {
    width: 100%;
    height: 350px;
    background: red;
}

Dziękuję za pomoc

Answer 1

Odejmij w klasie main szerokość szarego elementu przy pomocy funkcji calc():

width: calc(100% - 260px);

Answer 2

Cześć! Zanim zaczniesz układać bloki na swojej stronie warto zapoznać się ze wszystkimi właściwościami CSS. Nie jest ich wcale tak dużo. Polecam korzystać z funkcji "zbadaj element" w przeglądarce i na żywo edytować właściwości i wartości - obserwując efekt. Bardzo szybko się nauczysz jak to wszystko działa.

PS. Nazywaj bloki w taki sposób, żeby nie opisywać ich położenia, tylko opisać czym faktycznie są. Np. zamiast .right nazwij .page-menu. Oczywiście to jest przykład, bo nie wiem co dokładnie tam będzie. Wyguglaj "BEM" i od samego początku stosuj to w projektach :)

 

Na Twoje pytanie odpowiedział kolega wyżej więc nie będę się powtarzał. Powodzenia! :)