DIV na całą szerokość strony

Wykonać div-a, który jest rozciągnięty na całą szerokość strony/monitora, można na kilka sposobów. Do wykonania rozwiązania potrzebna będzie podstawowa znajomość HTML oraz CSS. Div stworzony będzie jako tło pod menu znajdujące się na górze strony (przykład: swierczek.biz).OK, zaczynamy.
Na początek należy dodać poniższą linijkę do naszego kodu źródłowego strony, jest to zadeklarowanie naszego diva:

<div id="menu-top"></div> 

Następnie w arkuszu stylów CSS dodajemy:
Sposób nr 1

#menu-top {
	background: #000;
	height: 30px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

Poprzez zastosowanie umiejscowienia stałego diva (fixed) o ustalonej pozycji od góry (0px) oraz od lewej (0px), div będzie cały czas u góry strony, nawet po zjechaniu scrollem niżej. Dodatkowo tło diva niezależnie od tego czy przybliżymy stronę czy też oddalimy cały czas będzie jednakowe, w tym wypadku czarne. Wadą tego rozwiązania jest to, iż po przybliżeniu strony lub oglądania w małej rozdzielczości inne elementy umiejscowione w tym divie np. tekst są niewidoczne (przykład: menu na stronie onet.pl), gdyż menu pozostaje w stałej pozycji.
Sposób nr 2

body {
	margin: 0;
}
#menu-top {
	background: #000;
	height: 30px;
	width: 100%;
	min-width:1000px;
}

Jest to sposób preferowany przeze mnie, tak jak widać na mojej stronie domowej. Poprzez zastosowanie atrybutu width 100% div rozciąga się na całą szerokość strony. Nie wystarczy to jednak do ładnie wyglądającego diva ponieważ przy przybliżeniu strony i przesunięciu suwakiem w bok div będzie miał tylko szerokość „monitora” a reszta będzie miała tło strony. Dlatego zastosowany został również atrybut min-width o wartości 1000px oznacza to, że div nie będzie mógł mieć szerokości mniejszej niż 1000px dlatego przy przybliżeniu czy oddaleniu div będzie miał swoje tło.