Create gap between div and form - html

Question

I can't figure out how to get a gap between
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
and
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
How would I go about doing it. I've tried using margin/padding without any luck?
HTML
<div class="bt fbCenter">
<div class="fb">
<div class="info">
<p>Event Starts:</p>
<p>25th December 2014 19:00</p>
</div>
<div class="info">
<p>Event Ends:</p>
<p>25th December 2014 21:00</p>
</div>
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
</div>
</div>
CSS
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 70%;
padding: 1em;
text-align: left;
margin-bottom: 2.5em;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbCenter {
text-align: center;
}
.bt .fb {
border: 1px solid #818181;
padding: 2em;
color: #585858;
display: inline-block;
text-align: left;
width: 75%;
}
.fb .info {
width: 100%;
margin-bottom: 1em;
}
.fb p {
float: left;
}
.fb p:nth-of-type(even) {
width: 80%;
}
.fb p:nth-of-type(odd) {
width: 20%;
}
.fb p.last {
width: 100%;
font-weight: 100;
}
Fiddle here.

Answer 1

Be aware of margin collapsing and float collapsing.
Add a marging to the top of the from and clear the floats in the info divs
.fb form{
margin-top:2em;}
.fb .info {
width: 100%;
margin-bottom: 1em;
clear:both;
}
.fb form{
margin-top:5em;}
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 70%;
padding: 1em;
text-align: left;
margin-bottom: 2.5em;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbCenter {
text-align: center;
}
.bt .fb {
border: 1px solid #818181;
padding: 2em;
color: #585858;
display: inline-block;
text-align: left;
width: 75%;
}
.fb .info {
width: 100%;
margin-bottom: 1em;
clear:both;
}
.fb p {
float: left;
}
.fb p:nth-of-type(even) {
width: 80%;
}
.fb p:nth-of-type(odd) {
width: 20%;
}
.fb p.last {
width: 100%;
font-weight: 100;
}
<div class="bt fbCenter">
<div class="fb">
<div class="info">
<p>Event Starts:</p>
<p>25th December 2014 19:00</p>
</div>
<div class="info">
<p>Event Ends:</p>
<p>25th December 2014 21:00</p>
</div>
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
</div>
</div>
Note that the margin on the top of the form needs to be bigger than the margin on the bottom of the .info class. This is due to Margin Collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing & http://www.sitepoint.com/web-foundations/collapsing-margins/)
You should probably also become familiar with Clearfix, how it works, why and when it is needed.
I'm not a fan of float so here as an alterate version that utilises display:table, display:table-row and display:table-cell

Answer 2

You could create another class to insert between both of them like this example http://jsfiddle.net/2kkep4qs/8/
HTML
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<div class="bt-space"></div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
CSS New class
.bt-space{padding:25px;}

Answer 3

you can do <hr> and color it white, or
you could always add an empty div between div and form:
<div class="info">
</div>