编辑：
想知道如何更新这个答案，因为有很多话要说，最好从下往上看。这将带您进入这样的布局：
当您重新调整窗口等大小时，菜单和徽标应保持原位。
现在看看你的代码。更好了，但你还是有一些麻烦：
-
border 仍然设置在图像上。 标记无效。
-
repeat-xy 仍在后台使用。 属性值无效。
-
#content 仍然有 padding 没有单位。 属性值无效。
-
<br> 标签仍然用于在文本中创建段落。
- 在#content 之后有一个额外的
}。 使 CSS 文件无效。
第 4 号。应该是固定的，但不是那么现在很重要。
正如我们已经讨论过 1-3 一样，很难理解为什么要保留它们。无效的标记和样式会导致不可靠的结果。
它在一个浏览器中看起来不错，在一个浏览器的一个版本中，在另一个版本中看起来很糟糕，在第三个版本中完全崩溃。您在代码和结果之间得到错误信息。何时或如果您将其修复为有效，其他可能会发生意想不到的变化，您必须做更多的工作来清理它。作为一个整体和规则第一。无论从如何做的角度来看，标记和样式有多么错误，一个必须将无效的标记和样式排除在外。
为了验证您的工作，并且您在体验方面处于何种位置，请始终这样做。做些小改动：验证。做些小改动：验证。等等。使用：
标记
现在的标记并不是最容易设计样式或以动态方式表现良好的。 hr 不是最容易使用的，并且在浏览器之间有所不同。 不要将表格用于菜单或样式。最好保留它们的用途：显示表格数据。对于您的菜单，您可以问自己：菜单是什么；好吧，这是一个清单。供最终用户浏览网站的选项列表。网络上有很多使用列表作为菜单的示例。在网络上搜索 CSS 列表菜单 等。您可以创建漂亮的、跨浏览器的可靠 CSS （不依赖 JavaScript）、菜单。
但让我们从基本标记开始：您通常会发现将整个页面包装在包装器中会很好。然后在其中添加子项。要定位主菜单、徽标等元素，最好为每个元素使用包装器并通过浮动、边距等定位它们。
一般使用边距和内边距。
页面布局
head div
divider div
content
div
页脚 Div
头部
Div 向左浮动 Div 向左浮动
LOGO菜单
kbd>
样式+标记
为了方便您自己使用临时边框和背景颜色来查看各种元素如何浮动。还可以使用浏览器内置工具来显示各种内容，例如边距等。这是非常宝贵的。
请记住，如果您使用边框，并且打算在成品上移除它们，它们会占用空间。
作为一个例子，你可以有这样的东西：
HTML：
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS：
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
注意：我通过以下方式对所有元素的边距和内边距进行硬重置：
* {
margin : 0;
padding; 0;
}
然后在我使用标签和元素时设置边距和填充。通常发现这是一种比其他方式更容易的方法。请记住，像 body 这样的东西也有填充等，并且经常会导致不需要的间距。
这样你也摆脱了底部的水平滚动条。
通过在 logo 和 menubar 之类的东西上使用浮动，元素可以很好地对齐。
接下来我们可以添加分隔符。在这里，我们可以使用 div 并为顶部和底部设置边框。在内容上，我们使用填充在页眉、文本和页脚之间留出空间。我们还在内容顶部添加了与分隔线完美对齐的白色边框。
HTML：
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS：
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
接下来我们可以添加内容文本并设置样式。还为页脚添加了样式。
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS：
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
调整窗口大小等并看到它很好地浮动。
现在是时候添加菜单了。如前所述，我们可以使用列表作为菜单。它比桌子更适合这项任务。在这方面还要注意菜单可能有子项，因为这样的列表成为唯一合理的选项。
在菜单上还要注意：您可能不希望使用其他颜色来设置已访问链接的样式。但这当然取决于你。
HTML：
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS：
由于我们已经将所有元素的边距和内边距设置为 0，这很简单：
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
删除辅助颜色等，我们有一个版本 0.1 可供进一步测试和扩展。
原答案：
问题不止一个。首先是标记：
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
使用段落来分组文本，而不是：
Text<br/><br/>Text<br/><br/>Text ...
但是：
<p>Text</p><p>Text</p><p>Text... </p>
CSS
内联 cmets 无效，请使用：
/* some comment */
Not:
// some comment
您的大多数 padding 值都缺少单位。如果一个值不为零，则需要一个单位，例如pt、px 等。使用：
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
如果你不这样做，它没有/（不应该有任何）效果。
background-repeat 没有repeat-xy。使用：
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
或者什么都没有，因为这是默认设置。
先解决这些问题。然后为你的事物设置一些颜色，这样更容易理解你想要什么。您可以稍后将它们改回来。使用红色、蓝色等。
Example.
关于零宽度无空格的bug，如Vim中所示：