不能在一个div内部放置2个div

Question

这是我的JSFiddle - code

我的问题是我无法将form1和form2置于content分区内。

我尝试了一些解决方案并且没有工作：

这些2 div
1. Float:left
2. 使用position:fixed; 不知道出了什么问题。

代码：

<div class="container">
    <div class="leftbar">
    </div>

        <div class="content">
            <div class="form1">
            </div>
            <div class="form2">
            </div>
    </div>

    <div class="botbar">
    </div>

代码：

html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}

.container{
    width:100%;
    height:100%;
    margin:0;
    padding:0;


}

.leftbar{
    width:10%;
    height:90%;
    background-color:rgba(0,153,255,0.4);
    position:fixed;
    left:0;
}

.botbar{
    width:100%;
    height:10%;
    background:rgba(0,0,255,0.4);
    position:fixed;
    bottom:0;
}

.content{
    width:100%;
    height:90%;
    position:fixed;
    background:black;
    left:10%;

}

.form1{
    width:45%:
    height:100%;
    float:left;
    background:red;
}

.form2{
    width:45%:
    height:100%;
    float:left;
    background:yellow;
}

Answer 1

嗨现在将此 :替换为此;

就像这样

 width: 45%:

进入这个

width:45%;

在.form2和.form1 css类

中

Answer 2

<div class="container">
    <div class="leftbar">
    </div>

        <div class="content">
            <div class="form1">
                hello2
            </div>
            <div class="form2">
                hello
            </div>
    </div>

    <div class="botbar">
    </div>

    <style>
    .form1,.form2
    {
        box-sizing: border-box;
    }
    .form1
    {
        float:left;
        width: 50%;
        border:1px solid green;

    }
    .form2
    {
        width: 50%;
        float:left;
        border:1px solid green;
    }

    .content
    {
    border: 1px solid red;
    width: 100%;
    }
    .content:after
    {
        clear: both;
        display: block;



    .form1,.form2
    {
        box-sizing: border-box;
    }
    .form1
    {
        float:left;
        width: 50%;
        border:1px solid green;
        
    }
    .form2
    {
        width: 50%;
        float:left;
        border:1px solid green;
    }

    .content
    {
    border: 1px solid red;
    width: 100%;
    }
    .content:after
    {
        clear: both;
        display: block;
        content: "";
    }
    
    </style>









----------
## 


----------

<!-- begin snippet: js hide: false -->
<div class="container">
	<div class="leftbar">
    </div>
    
    	<div class="content">
            <div class="form1">
                hello2
            </div>
            <div class="form2">
                hello
            </div>
    </div>
  
    <div class="botbar">
    </div>