i want two boxes at one page in one div - html

Question

I'm building a website, but I have a problem.
I have one div that creates the content with a BG color!
The problem is, the text appears in line to the bottom but I want them next to each other!
Here is a link to a screenshot for an example:
http://www.mupload.nl/img/9x7jco1v45f.png
I've tried some code in my CSS but nothing worked.
This is what I have now:
CSS:
#rechts {
float: right;
margin-right: 10px;
}
#lings {
float: left;
margin-left: 10px;
}
.inhoud {
padding-bottom:100px; /* Height of the footer element */
padding-top:150px;
background-color: #f5f5f5;
z-index: 999;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// here is the PHP Contact form.
</p>
</div><!-- #inhoud -->

Answer 1

utilize display:inline-block; like below
.container {
background-color: lightgray;
}
.section {
display: inline-block;
vertical-align: top;
width: 49%;
}
<div class="container">
<div class="section">
Some random inforamtion here<br/>
more contact information
</div>
<div class="section right">
Name<br/>
<input type="text" /><br/>
Email<br/>
<input type="text" /><br/>
Phone<br/>
<input type="text" /><br/>
</div>
</div>

Answer 2

For the HTML you provided, simply change your css to
.contactInhoudLings{
float: left;
width: 50%;
}
.contactInhoudRechts{
float: left;
width: 50%;
}
Demo

Answer 3

You could use flex to split the container in two or any other number.
.container {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
<div class="container">
<div class="col">
text
</div>
<div class="col">
your form
<form>
<label for=name>Name:<label/>
<input type=text name=name placeholder=name />
<input type=submit />
</form>
</div>
</div>

Answer 4

If you want margin-left and margin-right than try this:
HTML
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// Here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
CSS
.inhoud{
width: 100%;
}
.contactInhoudLings{
background-color: red;
float: right;
margin-right: 1%;
width:49%;
}
.contactInhoudRechts{
background-color: green;
float: left;
margin-left: 1%;
width:49%;
}
Look also the jsfiddle example