Wskazówka – Rozciąganie elementów blokowych na 100% szerokości, wewnątrz elementów z marginesem wewnętrznym


20 września 2014 / Mr.Mr


ściskanie cytrynyCzasami 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:

Do którego mamy taki kod CSS:

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ć?

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


Tagi:


11 odpowiedzi na “Wskazówka – Rozciąganie elementów blokowych na 100% szerokości, wewnątrz elementów z marginesem wewnętrznym”

  1. garmi pisze:

    .sidebar_event powinien mieć chyba padding: 0 20px;

    • Mr.Mr pisze:

      Dlaczego?

      • garmi pisze:

        Niestety… Po dodaniu ujemnego marginesu .sidebar_event nie rozciąga mi się, lecz zostawia buste miejsce (40px) po prawej stronie :/

      • Mr.Mr pisze:

        a masz w .sidebar_event coś takiego: width:100%; ?

      • hhshs pisze:

        Wszystko mam jak w przykładzie.

      • Mr.Mr pisze:

        „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;

      • hhshs pisze:

        A no tak. Nie doczytałem i z tego to zamiaszanie. :( Pozdrawiam.

  2. sssssssss pisze:

    kto w ogóle używa ujemnych marginesów, zasada jest taka żeby starać się projektować interfejs by nie używać ujemnych wartości

    • Mr.Mr pisze:

      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.

  3. eliano pisze:

    nie rozumiem, dlaczego nie zrobić po prostu padding:0; ??

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *