Układ trójkolumnowy strony przy pomocy div’ów:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>3 kolumy</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin:0px; padding:0px; } #wrapper { width:1000px; margin: 0px auto; } #left { float: left; background-color: red; width: 200px; } #right { float: right; background-color: yellow; width: 200px; } #content { background-color: pink; } </style> </head> <body> <div id="wrapper"> <div id="left"> left </div> <div id="right"> right </div> <div id="content"> content </div> </div> </body> </html> |
Ważna jest kolejność div’ów - najpierw lewy, potem prawy, na końcu umieszczamy środkowy - wtedy szerokość środkowej części automatycznie się dopasuje.
Dodatkowo możemy ustawić szerokość naszej strony na np. 1000px oraz wyśrodkować przez margin: 0px auto (górny i dolny margines na 0px, lewy i prawy automatycznie ustawiany przez przeglądarkę).
Brak komentarzy:
Prześlij komentarz