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/blog1.php/2009/03/11/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! :)