How to line up <divs>

[prophet224]

I'm not too familiar with CSS and I'm trying to get this to work.

Here's the page as is:
http://www.novusimperiums.com/blog/b.../easy-marinade

The ingredients and the optionals won't line up, and I can't get a break for the list without <br>, which seems to screw things up even more!

I know there are a lot of containers; I've been fooling with this all day and there could be a lot of weirdness in there now.

<div id="recipe">
<div id="recipe_title">Easy Marinades</div>

<div id="equipment">
<div id="equip_label">Equipment:</div>
<ul><li>Glass bowl w/plastic wrap</li>
  <li>Zip Lock bags</li></ul> 
</div> <!-- equipment -->

<div id="ingredients">
<div id="ingredient_label">Ingredients:</div>
<div id="ingredients_main">
<ul><li>~3tbsp Olive Oil</li>
  <li>~1/2 cup white vinegar (cider vinegar for pork)</li>
  <li>Seasonings (see below)</li>
  <li>1/4 cup water</li></ul> 
</div><!-- Ingredients_main --></div>

<div id="ingredient_options">
<div id="opt_ing_label">Optional (per recipe):</div>
<div id="optional_ing">
<ul><li>Lemon juice</li>
  <li>Lime juice</li>
  <li>Dr. Pepper</li>
  <li>Beer</li>
  <li>Soy sauce</li>
  <li>Hot oil</li>
</ul>
</div> <!-- Optional -->
</div>

<div id="instructions">
Instructions
</div>

</div> <!-- Recipe -->

Here's the CSS for this section:

#recipe{
	padding: 4px 5px 0px 5px;
	border: 1px solid #bed881;
	background: #Afff;
	margin-right: ;
	color:Black;
	font-weight:bolder;
	float: left;
	font-size: normal;
}

#recipe_title
{
    font-weight: bold;
    font-style:inherit;
    color: Navy;
    float:left;
    font-size:large;
    /*margin: 5px 5px 1px 1px;*/
    margin-right: 50%;
}

#recipe_label
{
    font-size: normal;
    color: #000000;
    float: left;
    font-weight: bold;
    margin: 5px 5px 1px 1px;
}

#equip_label
{
    font-size: normal;
    color: #000000;
    float: left;
    font-weight: bold;
    margin-right: 80%;
}

#equipment 
{
    font-weight: normal;
    font-style:inherit;
    color: inherit;
    float:left;
}

#equipment ul{
	list-style-type:disc;
	margin-left: 15px;
	padding-left: 15px;	
	font-weight:normal;
	float: left;
}

#ingredients
{
    font-weight: normal;
    font-style:inherit;
    color: inherit;
    float:left;
    /*margin: 5px 5px 1px 1px; */
}

#ingredient_label
{
    font-size: normal;
    color: #000000;
    float: left;
    font-weight: bold;
    margin-right: 20px;
}

#ingredient_options
{    
    font-weight: normal;
    font-style:inherit;
    color: inherit;
    float:left;
    /*position: relative;*/
}

#ingredients_main
{
    font-weight: normal;
    font-style:inherit;
    color: inherit;
    float:left;
}


#ingredients_main ul{
	list-style-type:disc;
	margin-left: 15px;
	padding-left: 15px;	
	font-weight:normal;
	float: left;
}

#opt_ing_label
{
    font-size: normal;
    color: #000000;
    float: left;
    font-weight: bold;
}

#optional_ing 
{
    font-weight: normal;
    font-style:inherit;
    color: inherit;
    margin-left: 0px;
	padding-left: 0px;
    float:left;
}

#optional_ing ul{
	list-style-type:disc;
	margin-left: 15px;
	padding-left: 15px;	
	font-weight:normal;
	float: left;
}

#instructions 
{
    text-indent: 20px;
    font-weight: normal;
    font-style:inherit;
    color: inherit;
    float:left;
}

Thanks for any help you can give!

[prophet224]

Hey all... this is mostly a *bump*.

Any thoughts on this? Basically the question is just that I'm tryiing to get to divs to line up side by side, and they won't QUITE line up. Please help!