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>
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.