HTML5 & CSS3

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

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

<aside class="sidebar">
<div class="sidebar_event">
<!-- jakis kod HTML -->
</div>
</aside>

Do którego mamy taki kod CSS:

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

.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

Tagi:cssHTMLwskazówka

komentarzy 11

  • Awatar
    garmi

    20 września 2014 22:06

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

    Odpowiedz
    • Awatar
      Mr.Mr

      21 września 2014 09:25

      Dlaczego?

      Odpowiedz
      • Awatar
        garmi

        21 września 2014 10:19

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

        Odpowiedz
      • Awatar
        Mr.Mr

        21 września 2014 22:03

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

        Odpowiedz
      • Awatar
        hhshs

        22 września 2014 10:26

        Wszystko mam jak w przykładzie.

        Odpowiedz
      • Awatar
        Mr.Mr

        22 września 2014 11:03

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

        Odpowiedz
      • Awatar
        hhshs

        22 września 2014 13:41

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

        Odpowiedz
  • Awatar
    Nicu

    7 października 2014 11:54

    http://css-tricks.com/box-sizing/

    Odpowiedz
  • Awatar
    sssssssss

    7 grudnia 2014 15:19

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

    Odpowiedz
    • Awatar
      Mr.Mr

      7 grudnia 2014 23:02

      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.

      Odpowiedz
  • Awatar
    eliano

    4 sierpnia 2015 11:44

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

    Odpowiedz

Zostaw odpowiedź