Zadanie domowe z kursu 3 HTML wielkość 100% Co popsułem?

Question

Witam Próbuję zrobić zadanie domowe ze zresetowanego kursu 3 HTML
Pierwszy problem z którym się zderzyłem to określenie w zadaniu "Interfejs ma zajmować 100% dostępnej przestrzeni" 20%/50%/30%
No ok ale jeśli uznam ze coś ma mieć łącznie 100% a potem chcę zrobić padding albo border to się to rozsypie. Nie zadziałał też padding podawany w %
Odpuściłem to i ustawiłem szerokość środkowej sekcji "na sztywno"
Pytanie jak zrobić by div main zajmował całe miejsce ograniczone tylko przez divy nav i tabela.
Parametr auto w divie .logo / .stopka działa divy te wypełniają cale wolne miejsce jakie zostają im w .box jednak .main nie ma ochoty rozepchać się na boki tak by wypełnić całą wolną przestrzeń.
Jakiś parametr? coś przeoczyłem w kodzie? A może cały mój sposób myślenia jest błędny.

I jeszcze jedno, dlaczego div robiący za container nie działa gdy nie postawi sie clear: both; bez tego parametru .pudlo po prostu "dziala" jakby na innym planie i nie dba od to co jest wewnątrz.

Edit: czy ktoś przede mną narzekał już na problemy z edycją posta gdy znajduje się w nim kod? przecież to jakaś granda. w phpbb znacznik code lepiej działał niż ten nadęty "code snippet" którego w trakcie edycji nie widać a który potwornie wkurza.
Edit zrezygnowałem z zamieszczeia tu kodu na rzecz dodania linków.

HTML
CSS

Answer 1

Aby po dodaniu paddingu/borderu nic się nie posypalo, istnieje właściwość css, a mianowicie:

box-sizing: border-box;

 

Dla .nav, .main, .tabela możesz nadać width w %, przez co zawsze zajmą łacznie 100% dostepnego miejsca.

Comments

Bardzo dziękuję, to dokładnie to o co mi chodziło :) Jesteś wielki.
box-sizing to brakujący parametr w kursie drugim, który uniemożliwia precyzyjne wykonanie zadania z kursu 3
Jestem bardzo bardzo początkujący, więc wyszedłem z założenia, że wiedza w tych kursach jest narastająca bez przeskoków i luk.
Nie ukrywam, że ciut się zawiodłem kursem 4 gdzie właśnie zamiast obiecanego CSS dostaliśmy więcej HTML5