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>