2 divy jeden 30% drugi reszta (pierwszy div max-width: 400px;)

Question

Witajcie, 

Mam następujący problem:

mam 2 divy (prawy, lewy (float: left;)), ten pierwszy ma szerokość 30% + max-width: 400px;, A drugi ma 70%;.

Ale jest następujący problem gdy rozszerzam okno przeglądarki 1 div zatrzymuje się na 400px a drugi robi te 70% i zostaje przestrzeń pomiędzy blokiem containera a drugim divie (pokażę na obrazku)

 

Macie może pomysł jak zrobić aby ten drugi DIV wypełnił resztę wolnego miejsca

Comments

Fajnie by było jak byś dał kod.

Answer 1

Ustawiając prawemu blokowi szerokość 70% blokujesz dalsze jego rozszerzenie, jeśli jest wolne miejsce (a zaczyna powstawać, gdy lewy blok osiąga swoją maksymalną szerokość - czyli 400px)

Możesz użyć flexboxa.
Lewy div - max-width:400px oraz width:30%
Prawy div - flex-grow:1 (w efekcie zajmie resztę miejsca)

https://jsfiddle.net/xd70wodw/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://flexboxfroggy.com/

Comments

Dzięki działa tylko jeszcze jedna sprawa gdy mam jeszcze header nad tymi dwoma kolumnami to całość się psuje i nic nie wychodzi :/

https://jsfiddle.net/xd70wodw/2/

---

https://jsfiddle.net/xd70wodw/4/

Czy chodzi o coś takiego?

---

TTTTAAAAAKKKK !!! <3

Dziękuję :)

---

Nie ma sprawy :D

Answer 2

Witam. Można zrobić div na 100% szerokości a na nim div o szerokości 30% i nie przekraczający 400px; Do rozwiązanie pozostanie problem przykrywania treści pierwszego diva przez drugi.