Czasami proste problemy są najbardziej irytujące. Dlatego właśnie uruchomiliśmy nasz cykl szybkich wskazówek, które mogą pomóc Wam szybciej uporać się z męczącymi 'bugami’ i problemami. Dzisiaj zajmiemy się prostą, ale czasami złośliwą sprawą – rozciąganiem elementów blokowych na 100% szerokości wewnątrz elementów z marginesem wewnętrznym.
Przypuśćmy, że mamy następujący kod HTML:
1 2 3 4 5 | <aside class="sidebar"> <div class="sidebar_event"> <!-- jakis kod HTML --> </div> </aside> |
Do którego mamy taki kod CSS:
1 2 3 4 5 6 7 | .sidebar { width:200px; padding:0 20px; } .sidebar_event { width:100%; } |
Niestety div o klasie .sidebar_event nie rozciągnie się na 100% szerokości rodzica o klasie .sidebar ponieważ ograniczy go padding dodany do klasy rodzica.
Jak temu zaradzić?
1 2 3 | .sidebar_event { margin:0 -20px; } |
Minusowy margines rozciągnie .sidebar_event tak aby zajmował 100% rodzica. Pamiętajmy jednak by nie nadawać szerokości elementowi .sidebar_event – element blokowy sam rozciągnie się na 100% dostępnego miejsca.
Gotowe!
Image courtesy of Ambro at FreeDigitalPhotos.net
.sidebar_event powinien mieć chyba padding: 0 20px;
Dlaczego?
Niestety… Po dodaniu ujemnego marginesu .sidebar_event nie rozciąga mi się, lecz zostawia buste miejsce (40px) po prawej stronie :/
a masz w .sidebar_event coś takiego: width:100%; ?
Wszystko mam jak w przykładzie.
„Minusowy margines rozciągnie .sidebar_event tak aby zajmował 100% rodzica. Pamiętajmy jednak by nie nadawać szerokości elementowi .sidebar_event – element blokowy sam rozciągnie się na 100% dostępnego miejsca.”
Chodzi o to, że width:100% trzeba zastąpić margin: 0 -20px;
A no tak. Nie doczytałem i z tego to zamiaszanie. :( Pozdrawiam.
http://css-tricks.com/box-sizing/
kto w ogóle używa ujemnych marginesów, zasada jest taka żeby starać się projektować interfejs by nie używać ujemnych wartości
Ogólnie tak, ale wyobraźmy sobie sytuację, że do istniejącej strony dochodzi nowy element. Przewidywany wygląd jest taki, że rozciąga się na całą kolumne prawego sidebara… a w sidebarze padding… Taka prosta sztuczka jest przydatna do załatwiania spraw, które inaczej mogłyby oznaczać niepotrzebne rozgrzebywanie całego layoutu.
nie rozumiem, dlaczego nie zrobić po prostu padding:0; ??