Layout čili rozvržení stránky

Tento příklad ukazuje tří sloupcový styl

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>  </title>
    <style>
  div,body,form {margin:0;padding:0}
  div#hlava {height:100px;width:100%;border:1px solid red;position:fixed}
  div#telo {width:100%;border:1px solid blue;position:relative;}
  /*div#menu {border:1px solid green;width:200px;display:table-cell;float:left}
  div#obsah {width:590;display:table-cell;border:1px solid #F0F;float:left}
  div#pravo {border:1px solid green;width:200px;display:table-cell}
  */
  div#menu {border:1px solid green;width:200px;display:table-cell;position:absolute;top:0;left:0}
  div#obsah {width:590;display:table-cell;border:1px solid #F0F;position:absolute;top:0;left:200px}
  div#pravo {border:1px solid green;width:200px;display:table-cell;position:absolute;top:0;left:800px}
    </style>
    </head>
    <body>
  <div id="hlava">  </div>
  <div id="telo">
  <div id="menu">  </div>
  <div id="obsah">

xx
xx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xxxx
x

x
x
x
xx

 </div>
 <div id="pravo">
 <form>
 <table>
 <tr> <td> <input type="text" name="uzjm"> </td> </tr>
 <tr> <td> <input type="password" name="heslo"> </td> </tr>
 <tr> <td> <input type="submit" name="odeslat" value="přihlásit"> </td> </tr>
 </table>
 </form>

 </form>
 </div>
 </div>
   </body>
 </html>

Případně můžem potřebovat i hlavičku

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
   <meta name="generator" content="PSPad editor, www.pspad.com">
   <title> </title>
   <style>
  div,body {margin:0;padding:0}
  body {text-align:center;}
  div#telo {width:800px;border:1px solid red;
  text-align:left;position:relative;
  margin-left:auto;margin-right:auto
  /*margin:0 auto 0 auto;*/
  }
  div#hlava {width:100%;position:absolute;top:0;left:0;
    height:100px;width:100%;
    background-color:#00C}
  div#menu {width:200px;border-right:1px solid black;
  background-color:red;position:absolute;
  top:100px;left:0;
  }
  div#obsah {background-color:yellow;width:400px;
    position:absolute;
  top:100px;left:200px;}
  div#pravo {width:200px;background-color:green;
  position:absolute;
  top:100px;left:600px;
  }
   </style>
   </head>
   <body>
 <div id="telo">
 <div id="hlava"> </div>
 <div id="menu">
kdhsfa <br />
afdska <br />
faskfa <br />
kasflú <br />
 </div>
 <div id="obsah">
 <p>fjkfhjadúg </p>
 <p>fjkfhjadúg </p>
 <p>fjkfhjadúg </p>
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
 <p>fjkfhjadúg </p>
v
v
 </div>
 <div id="pravo">
xxxx
 </div>
 </div>
   </body>
 </html>

Samizdatová skripta

Layout čili rozvržení stránky