[CSS][jQuery] Zmienny widok strony, czyli różny układ modułów

Po dłuższej przerwie postanowiłem zaprezentować kolejny ciekawy trick związany z wykorzystaniem biblioteki jQuery. Jest nim sposób na zmienne ustawianie pozycji modułów strony. Podobny efekt można zauważyć na stronie Youtube.

: Początkowe ułożenie modułów

: Końcowe ułożenie modułów

Na początku należy zbudować odpowiednią strukturę strony, która dla tego przykładu wygląda następująco:

<div id="header">
</div>
<div id="tresc">
    <div id="zawartosc">
    	<a id="zmien" href="#">Zmień ułożenie</a> 
    </div>
    <div id="sidebar">
    </div>
    <div id="modul">
    </div>
</div>
<div id="stopka">
</div>

Jak widać umiejscowiłem w jednym z modułów link do zmiany szerokości, który będzie spełniał swoją funkcję po odpowiednim okodowaniu go z użyciem biblioteki jQuery. Co nastąpi w dalszej fazie artykułu.
Teraz pora na kod CSS:

#header, #zawartosc, #modul, #sidebar, #stopka { 
	margin:10px 0px;
	padding:30px;
}
#header { 
	width:900px;
	margin:0px auto;
	background: #981a1a;
}
#tresc {
	width:960px;
	margin:0px auto;
	overflow:hidden;
}
#zawartosc { 
	width:540px;
	float:left;
	background: #746666;
}
#modul { 
	width:540px;
	float:left;
	background: #981a1a;
}
#sidebar {
	width:280px;
	margin-left:20px;
	float:right;
	background: #981a1a;
}
#stopka { 
	width:900px;
	margin:0px auto;
	background: #981a1a;
}
#zawartosc.szerzej { 
	width:900px;
}

Tutaj ważne jest to, że #sidebar ma ustawienie float: right, kiedy #zwartosc i #modul mają ustawienie na float: left. Dzięki temu, sidebar się przesunie na dół w momencie rozszerzenia sekcji zawartosc.
Teraz pora na kod JavaScript, ktory będzie odpowiedzialny za zmianę szerokości sekcji "zawartosc"

$(document).ready(function() {
    $("#zmien").click(function() {
        $("#zawartosc").toggleClass("szerzej");
    });
});

I to by było na tyle.
Należy pamiętać o tym, aby dołączyć bibliotekę jQuery do kodu strony, aby skrypt, który napisaliśmy, mógł zadziałać.
Tutaj możesz sprawdzić demo z tego artykułu: Dynamiczna zmiana pozycji modułów z użyciem jQuery