Html Div被搞砸了我想给它添加文本？

基本上，当我试图在一个

中添加一个段落时，我遇到了麻烦。这一页似乎乱七八糟。我的代码有什么问题吗？还有，我的代码需要改进的地方有哪些

谢谢

* {
字体系列：格鲁吉亚；
}
身体{
背景色：白色；
}
#内容{
宽度：60%；
高度：1500px；
保证金：自动；
}
#标题{
高度：200px；
边框：1px虚线；
背景色：#44424D；
}
#左{
宽度：20%；
身高：100%；
显示：内联块；
}
#对{
身高：100%；
宽度：20%；
显示：内联块；
位置：相对位置；
左：676px；
}
#名字{
字体家族：大约翰；
字体大小：50px；
宽度：100%；
保证金：0自动；
边框底部：1px实心；
颜色：白色；
}
wot先生{
背景色：#E6C88C；
}
电影俱乐部
电影俱乐部
试验

首先，HTML中有逗号，这是不正确的

<div id="content">
    <div id="header">
        <h1 id="name">The Film Club</h1>
    </div>
    <div id="left" class="wot">
        <p>Test</p>
    </div>
    <div id="right" class="wot">
    </div>
</div>

电影俱乐部
试验

第二，文本位于中的div的高度设置为

100%

，而内容的高度设置为

1500px

，因此div将扩展到此全高。div的高度仅在其包含内容时应用，这就是为什么在输入文本时它会发生更改的原因。您可以从CSS中删除高度，或将其设置为更合适的值。

您的两个

用逗号分隔属性。html标记中的属性不需要用逗号分隔。它们应该用一个空格隔开（这可能甚至不是必需的，但为了保持良好的风格，您应该这样做）

---

我假设不正确的缩进是发布代码的结果，但如果不是这样，正确的缩进总是改进代码的好方法。

我已经更改了以下CSS代码

#left {
      width: 20%;
      height: 100%;
      float:left;
      display: inline-block;
     }
#right {
      height: 100%;
      width: 20%;
      display: inline-block;
      position: relative;
      float: right;   
} 

* {
字体系列：格鲁吉亚；
}
身体{
背景色：白色；
}
#内容{
宽度：60%；
高度：1500px；
保证金：自动；
}
#标题{
高度：200px；
边框：1px虚线；
背景色：#44424D；
}
#左{
宽度：20%；
身高：100%；
浮动：左；
显示：内联块；
}
#对{
身高：100%；
宽度：20%；
显示：内联块；
位置：相对位置；
浮动：对；
}
#名字{
字体家族：大约翰；
字体大小：50px；
宽度：100%；
保证金：0自动；
边框底部：1px实心；
颜色：白色；
}
wot先生{
背景色：#E6C88C；
}
电影俱乐部
电影俱乐部
试验

你能解释一下你所说的混乱是什么意思吗？或者您可以提供一个JSFIDLE？谢谢怎么搞砸了？请详细说明。这个答案需要一些解释。