DIV Stacking & Spacing Using CSS - html

Question

As you will see (very quickly), I am somewhat new to CSS. Ultimately I am trying to develop a "timeline", sort of like what facebook had years ago, where each post would be displayed in a timeline. Each post would ultimately alternate between the left side and the right side. For example, Post 1 - left side, post 2 - right side, post 3 - left side, etc...
I am having trouble with the layout of my timeline. I've found a way to make the posts alternate sides, however each "post" is essentially stacked on top of each other, whereas I'd like to put at least 35px spacing between each post. What this means is the second post (on the right side), would be 35px lower than the bottom of the first post (on the left side) and the third post would be 35px lower than the bottom of the second post (on the right side)...so on and so forth.
Any thoughts on how I might accomplish this?
<div id="timeline" style="background-color: #fff; float: left; padding: 10px; clear: left; width: 900px; margin-top: 25px;">
<div id="middle" style="width: 900px; height: 133px; background: transparent url('/timeline.png') repeat-y scroll 0px 0px;">
<div id="leftblock" >
<img src="/dot1.png">
<div style="float: left; margin-right: 23px;">
<div style="border: 1px solid #ccc; width: 400px; float: left;padding: 5px;">adfasdfsdaf</div>
<img style="float: left;" src="/right_arrow.png">
</div>
</div>
<div id="rightblock">
<img style="float: left;" src="/dot1.png">
<div style="float: left; margin-left: 23px;">
<img style="float: left;" src="h/left_arrow.png">
<div style="border: 1px solid #ccc; width: 400px; float: left; padding: 5px;">adfasdfsdaf</div>
</div>
</div>
<div id="leftblock" >
<img src="/dot1.png">
<div style="float: left; margin-right: 23px;">
<div style="border: 1px solid #ccc; width: 400px; float: left;padding: 5px;">adfasdfsdaf</div>
<img style="float: left;" src="right_arrow.png">
</div>
</div>
<div id="rightblock">
<img style="float: left;" src="dot1.png">
<div style="float: left; margin-left: 23px;">
<img style="float: left;" src="/left_arrow.png">
<div style="border: 1px solid #ccc; width: 400px; float: left; padding: 5px;">adfasdfsdaf</div>
</div>
</div>
</div>
</div>

Answer 1

You need to use a separate stylesheet for your css. This way you only need to define 2 sets of rules and you avoid code duplication. Anyways, once you have that set up, simply apply this code.
#leftblock, #rightblock{
margin-bottom: 35px;
}
This gives a 35px margin to the bottom of every div that has an id of leftblock or rightblock.
EDIT: My mistake, as per #Skullclutter's answer, please use classes instead of ids.

Answer 2

As a direct answer to your question, you can use margin-bottom: 35px; to add spacing below each box.
There's a few things you can do to make this code work well for future use, and to follow standard practices.
First off, id attributes must be unique throughout the page - an id of #content can only appear one time, so they're not ideal for repeating elements. Use class instead, which can be used as often as needed.
Next, use an external style sheet instead of inline styles. They're much easier to manage and the industry standard.
It's also generally a good idea to use as few elements as possible for your requirements (combining styling onto one element when possible).
I've marked up your code to show how a fixed up snippet may look:
#timeline{
background-color:#fff;
float: left;
padding: 10px;
clear: left;
width: 900px;
margin-top: 25px;
}
#middle{
background: transparent url('/timeline.png') repeat-y scroll 0px 0px;
}
.block{
float: left;
width: 400px;
display: block;
margin-right: 23px;
margin-bottom: 35px;
}
.block .content{
border: 1px solid #ccc;
padding: 5px;
}
.icon{
float: left;
}
.block:nth-of-type(odd) .icon{
float: right;
}
<div id="timeline">
<div id="middle">
<div class="block" >
<img class="icon" src="/dot1.png" />
<img class="icon" src="/right_arrow.png" />
<div class="content">adfasdfsdaf</div>
</div>
<div class="block">
<img class="icon" src="/dot1.png" />
<img class="icon" src="h/left_arrow.png" />
<div class="content">adfasdfsdafadfasdfsdaf<br />adfasdfsdaf<br /></div>
</div>
<div class="block" >
<img class="icon" src="/dot1.png" />
<img class="icon" src="/right_arrow.png" />
<div class="content">adfasdfsdaf<br />adfasdfsdaf<br /></div>
</div>
<div class="block">
<img class="icon" src="/dot1.png" />
<img class="icon" src="h/left_arrow.png" />
<div class="content">adfasdfsdaf</div>
</div>
</div>
</div>
http://jsfiddle.net/daCrosby/g2w6dzo3/1/

Answer 3

One thing to add: you can only have one of each ID name on the page. For what you're doing, I'd suggest using class=leftblock and class=rightblock instead.
Then Eric's code becomes:
.leftblock, .rightblock{
margin-bottom: 35px;
}