div w main-szerokość pola

0

Witam, mam prosty kod ale nie wiem czemu nie mogę ustawić szerokości div'a na żądany rozmiar:

w HTML:

<main>
<div class="field"></div>
</main>

a w CSS:

main {background-color: rgba(201,76,76,0.5);}
.field {
box-sizing: border-box;
width: 300px;
height: 400px;
margin-top:200px;
}

1

Zmień sobie w CSS kolor samego DIV'a na np. czerwony

main {background-color: rgba(201,76,76,0.5);}
.field {
box-sizing: border-box;
width: 300px;
height: 400px;
margin-top:200px;
background-color: red;
}

i sprawdź, co się dzieje. U mnie DIV jest odpowiedniej szerokości, tylko znajduje się po lewej stronie. Podejrzewam, że u Ciebie jest podobnie - tylko ponieważ kolor nadałeś samemu MAIN a nie DIV, to go nie widzisz ;)

Żeby ustawić go na środku - dodaj do stylu jeszcze:

margin-right: auto;
margin-left: auto;

Sprawdzałem i mogę swobodnie zmieniać wysokość oraz szerokość tego DIVa i wszystko zachowuje się tak, jak powinno :)

1

Po wprowadzeniu opisanych zmian u mnie przykład wygląda następująco:

screenshot-20180214092029.png

0

ok, działa dzięki;)

0

jak sobie ustalasz wartości w px a nie w % to powodzenia potem w rwd ;)

0

Skarpetka - czepiasz się ;) Wprawdzie masz rację, ale nie o to chodziło w tym pytaniu / wątku. Problem był innego typu, co nie zmienia faktu, że wersja produkcyjna powinna być bardziej elastyczna.

0

nie wiem gdzie tu czepianie, znajomość Viewport Units daje olbrzymie możliwości i elastyczność layoutu+zaoszczędzenie mnóstwa czasu bez zabawy z media queries
https://css-tricks.com/fun-viewport-units/

1 użytkowników online, w tym zalogowanych: 0, gości: 1