Baza modelek Glamour Models: Modelki, Fotomodelki, Hostessy

środa, 9 lutego 2011

Trójkolumnowy układ strony

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