Chciał bym, żeby strona wyglądała tak

A wygląda tak

Chodzi o to, że ta tabela 'wżyna' się na tekst

Wie ktoś jak temu zaradzić ?
<link rel="Stylesheet" type="text/css" href="style.css" /> <div id="nagłówek"> <br> </ul> <div id="menusrodek"> <form method="get" id="searchfrom" action=""> </form> </div> <ul id="menudol"> </div> <div id="wpis"> Danowski </p> <img src=obrazki/flybook.jpg" alt="Flybook MV" /> <p>Co początkowo wygląda na tuzinkowego laptopa. Wcale nim nie jest. Flybook VM posiada ekran mogący ustwić się w pozycji normalnego ekranu LCD, tak aby użytkownik miał wygodniejszą pozycje podczas użytkowania komputera. Szczególnie przydatne jest to w czasie korzystania z laptopa w miejsach, gdzie mamy bardzo małą powierzchnie na położenie netbooka, np. w samolocie</p> <p>Flybook VM może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa mają aspiracje, aby ich produkt konkurował z deskopami. Laptopa będzie można kupic pod koniec miesiąca w cenie $2.899.</p> </div> <body> <div> <div id="zawartość"> </div> <div id="nawigacja"> <ul> </ul> <ul> </ul> </body> </div> </html>
body { margin:0; padding:0; background-color:white; } div#naglowek { width:100%; border-bootom:solid 5px #518AB5; } div#naglowek li { display:inline; margin-left:15px; } div#naglowek a { text-decoration:none; color:white; border-bootom:solid 5px #518AB5 } div #naglowek a:hover { color:silver; border-bootom:solid white 3px; } ul#menugora { margin:0; height:30px; background-color:#518AB5 list-style:none; font-family:monospace; } div#menusrodek { height:150px; } div#menusrodek img, div#menusrodek a P border:0; } div#menusrodek img { vertical-aling:middle: } div#menusrodek form { postition:absolute; right=10px; top:1px; } div#menusrodek input.pole { background-color:silver; border:1px solid white; width:150px; padding:0; margin:0; } ul#menudol { background-color:#518AB5; margin:0; margin-left:300px; height:40px; text-align:center; font-size:large; text-transform:uppercase; } body, html, #zawartosc { min-height:100%; height:100%; } html>body, html>body #zawartosc { height:auto; } div#stopka { width:100%; height:40px; background:#518AB5 url(http://www.globus-wapienica.eu/userfiles/Mini_Stopka_str.jpg); padding-top:10px; position:absolute; bottom:0;} div#stopka p { margin:0; padding-left:20px; font-size:smaller; } div#nawigacja { position:absolute; right:0; top:15em; width:300px; max-widyj:300px; background-image:url(0brazki/tło1.png); background-repeat:no-repeat; padding:0; margin:0; } div#zawartosc { margin-right:20em; margin-left:1em; } div#nawigacja h3 { margin:0; padding:0; font-weight:bold; } div#nawigacja ul { margin:3px; }
#wpis { width:800px; }
#wpis { width:800px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="nagłówek"> <br> </ul> <div id="menusrodek"> <form method="get" id="searchfrom" action=""> </form> </div> <ul id="menudol"> </div> <div id="wpis"> Danowski </p> <img src="obrazki/flybook.jpg" alt="Flybook MV" /> <p>Co początkowo wygląda na tuzinkowego laptopa. Wcale nim nie jest. Flybook VM posiada ekran mogący ustwić się w pozycji normalnego ekranu LCD, tak aby użytkownik miał wygodniejszą pozycje podczas użytkowania komputera. Szczególnie przydatne jest to w czasie korzystania z laptopa w miejsach, gdzie mamy bardzo małą powierzchnie na położenie netbooka, np. w samolocie</p> <p>Flybook VM może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa mają aspiracje, aby ich produkt konkurował z deskopami. Laptopa będzie można kupic pod koniec miesiąca w cenie $2.899.</p> </div> <div> <div id="zawartosc"> </div> <div id="nawigacja"> <ul> </ul> <ul> </ul> </div> <br clear="both" /> </body> </html>
body { margin:0; padding:0; background-color:white; } div#naglowek { width:100%; border-bottom:solid 5px #518AB5; } div#naglowek li { display:inline; margin-left:15px; } div#naglowek a { text-decoration:none; color:white; border-bottom:solid 5px #518AB5 } div #naglowek a:hover { color:silver; border-bottom:solid white 3px; } ul#menugora { margin:0; height:30px; background-color:#518AB5; list-style:none; font-family:monospace; } div#menusrodek { height:150px; } div#menusrodek img, div#menusrodek a { border:0; } div#menusrodek img { vertical-aling:middle: } div#menusrodek form { position:absolute; right:10px; top:1px; } div#menusrodek input.pole { background-color:silver; border:1px solid white; width:150px; padding:0; margin:0; } ul#menudol { background-color:#518AB5; margin:0; margin-left:300px; height:40px; text-align:center; font-size:large; text-transform:uppercase; } body, html, #zawartosc { min-height:100%; height:100%; } html>body, html>body #zawartosc { height:auto; } #wpis { width: 800px; float: left; } div#stopka { width:100%; height:40px; background:#518AB5 url("http://www.globus-wapienica.eu/userfiles/Mini_Stopka_str.jpg"); padding-top:10px; position:absolute; bottom:0; } div#stopka p { margin:0; padding-left:20px; font-size:smaller; } div#nawigacja { right:0; top:15em; width:300px; max-width:300px; background-image: url("0brazki/tło1.png"); background-repeat:no-repeat; padding:0; margin:0; float: right; } div#zawartosc { margin-right:20em; margin-left:1em; } div#nawigacja h3 { margin:0; padding:0; font-weight:bold; } div#nawigacja ul { margin:3px; }