Help with CSS "Box" Class

Hey Guys, Kind of a newbie to CSS and was hoping i might find some help here.

I'm having a heck of a time trying to line up some groups of text using css.
This is what i'm trying to achieve...

http://desmond.imageshack.us/Himg151/scaled.php?server=151&filename=examplehq.jpg&res=landing

This is what i'm getting...

http://desmond.imageshack.us/Himg845/scaled.php?server=845&filename=example2q.jpg&res=landing

I have been at it for hours trying to play with right and left margin values with no results.

Here is a link to the test page im using
http://biophysics.com/test.php

Here is the code
<?php

$page_name = 'index';

include('includes/header.php');

?>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-weight: bold;
}
-->
</style>

<div id="inner" class="home">
<div id="main-image" class="box"> &nbsp; </div>

<div id="whatis" class="box">
<div class="content">

<p class="description"><span><a href="http://www.biophysics.com/ecis-theory.php" title="Learn About ECIS">Learn about ECIS</a>:</span> The label free, non-invasive method to electronically monitor cells grown in tissue culture.</p>
<ul class="col1">
<li><a href="http://www.biophysics.com/woundhealingpubs.php">Migration</a></li>
<li><a href="http://www.biophysics.com/signaltransduction.php">Signal Transduction</a></li>
<li><a href="http://www.biophysics.com/cellattachment.php">Attachment & Spreading</a></li>

<li><a href="http://www.biophysics.com/metastaticpotential.php">Metastatic Potential</a></li>
</ul>
<ul class="col2" style="margin-bottom: 0;">
<li><a href="http://www.biophysics.com/invitro.php">Toxicology</a></li>
<li><a href="http://www.biophysics.com/cellmeasurements.php">Proliferation</a></li>
<li><a href="http://www.biophysics.com/barrierfunction.php">Barrier Function</a></li>
<li><a href="http://www.biophysics.com/flow.php">Cells Under Flow</a></li>

</ul>
</div>
</div>

<div id="center">
<a href="#"><span>&nbsp;</span></a>
</div>

<div id="content" class="box">
<p style="margin-bottom: 0">Applied BioPhysics has over 25 years of experience with impedance-based cell assays put into one instrument line. Our ECIS instruments and consumable 8-well and 96-well arrays are used in biological research and drug discovery. ECIS offers the ability to measure both simple and complex impedance over a wide range of AC frequencies.</p>

</div>

<div id="events" class="box">
<div class="content">
<h2><span>Upcoming Events</span></h2>
<div id="webinars">
<h3><a href="webinar.php">
<img src="images/webinars.png">
</a>
</h3>
<ul style="margin-bottom: 0;">

<li>
<span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">Barrier Function<br>Assays</a> <br />

<span class="style1">11:00 AM EST<br />
June 19, 2012 </span></span></li>
</ul>
</div>
<div id="tradeshows">
<h3><a href="tradeshows.php">
<img src="images/tradeshows.png">
</a>
</h3>

<p style="margin-top: 0; margin-bottom: 0"><a href="http://biophysics.com/tradeshows.php" target="_blank">Harvard University Medical School</a></p>
<p style="margin-top: 0; margin-bottom: 0;">July 19, 2012</p>
<p style="margin-top: 0; margin-bottom: 0;">Boston, MA<span track="on" href="http://www.ascb.org/index.php?option=com_content&amp;view=article&amp;id=384&amp;Itemid=304" shape="rect" linktype="link"></span><br />
</span> </p>
</div>


<div id="training">
<h3><a href="tradeshows.php">
<img src="images/ecis-training.png"></a> </h3>
<ul style="margin-bottom: 0;">

<li>
<span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">ECIS Training Schedule</a> <br />
<span class="style1">Sept 20 & 21, 2012</span></span></li>
</ul>
</div>

</div>

</div>
<!-- <a id="order" href="http://visitor.constantcontact.com/d.jsp?m=1102585480643&p=oi"><span>&nbsp;</span></a> -->
<a id="order" href="store.php"><span>&nbsp;</span></a>
<a id="join" href="http://visitor.constantcontact.com/d.jsp?m=1102585480643&p=oi" target="_blank"><span>&nbsp;</span></a>
<a id="facebook" href="http://www.facebook.com/pages/Applied-BioPhysics/165532397615" target="_blank"><span>&nbsp;</span></a>
<?php include('includes/footer.php'); ?>

If anyone has any ideas it would be greatly appreciated. Would be happy to buy ya a cup of coffee! :)

Made the left margins on div.training and div.tradeshows 0px and changed the left margin on div.webinars to 30px. It's prety close to exactly what you want but you can play around more to make it perfect. Looks like this:

http://i.imgur.com/OuHd8.png

Also, you should change the titles (webinars, tradeshows, etc.) to plain text as it's more accessible and would even look better. In the future, having a tool like Firebug makes it really convenient and easy to play around with margins and see them update live without having to make any permanent changes to push anything to the webserver.

boko you Rock! Thx so much. Gonna try it out now :)

Would you be able to post your results boko? im not getting it.

Those three margins were the only things I changed. I only checked it in Firefox but if you continue playing with the numbers you shouldn't have a problem getting it to work. I didn't see any errors in your code that would screw it up otherwise.

awesome! thx man.
will continue working on it first thing in the am.

also thx for the suggestion on titles. will change to true type for sure.
not sure why the previous developer made picture files for text!
kinda silly!

this project is something that was created by someone
else and now im making updates for the company

Wouldn't it be easier to just use position:fixed; on it? then use the "top" and "left" to coordinate it.

Still no dice :(
Changed the left margins like you said but still getting same results.
Viewing it in IE.

Here is the updated code per your instructions


<div id="events" class="box">
<div class="content">
<h2><span>Upcoming Events</span></h2>




<div id="webinars">
<ul style="margin-bottom: 0; margin-left: 30px;">
<h3><a href="webinar.php">
<img src="images/webinars.png">
</a>
</h3>


<li>
<span class="name"><a href="https://appliedbiophysics.webex.com" target="_blank">Barrier Function<br>Assays</a> <br />

<span class="style1">11:00 AM EST<br />
June 19, 2012 </span></span></li>
</ul>
</div>






<div id="tradeshows">
<ul style="margin-bottom: 0; margin-left: 0px;">
<h3><a href="tradeshows.php">
<img src="images/tradeshows.png">
</a>
</h3>

<a href="http://biophysics.com/tradeshows.php" target="_self">Harvard University Medical School</a> <br />

<span class="style1">July 19, 2012
<br />
Boston, MA </span></span></li>
</ul>
</div>






<div id="training">
<ul style="margin-bottom: 0; margin-left: 0px;">
<h3><a href="tradeshows.php">
<img src="images/ecis-training.png"></a> </h3>


<li>
<span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">ECIS Training Schedule</a> <br />
<span class="style1">Sept 20 & 21, 2012</span></span></li>
</ul>
</div>

</div>

</div>


Bigcasey, can you elaborate on your method?

Try #events #webinars {
clear: left;
/* margin-left: 54px;*/

}
/*#events #tradeshows {
margin-left: 100px;
}*/

What i changed the CSS


#events #tradeshows {
margin-left: 10px;
}

#events #webinars {
clear: left;
margin-left: 0px;
}





What i made the HTML
<div class="content">
<h2><span>Upcoming Events</span></h2>




<div id="webinars">
<ul>
<h3><a href="webinar.php">
<img src="images/webinars.png">
</a>
</h3>


<li>
<span class="name"><a href="https://appliedbiophysics.webex.com" target="_blank">Barrier Function<br>Assays</a> <br>

<span class="style1">11:00 AM EST<br>
June 19, 2012 </span></span></li>
</ul>
</div>






<div id="tradeshows">
<ul>
<h3><a href="tradeshows.php">
<img src="images/tradeshows.png">
</a>
</h3>

<a href="http://biophysics.com/tradeshows.php" target="_self">Harvard University Medical School</a> <br>

<span class="style1">July 19, 2012
<br>
Boston, MA </span>
</ul>
</div>






<div id="training">
<ul>
<h3><a href="tradeshows.php">
<img src="images/ecis-training.png"></a> </h3>


<li>
<span class="name"><a href="https://appliedbiophysics.webex.com" target="_self">ECIS Training Schedule</a> <br>
<span class="style1">Sept 20 &amp; 21, 2012</span></span></li>
</ul>
</div>

</div>

heres a screenshot
http://cl.ly/0J410i2F201I2r3z2J3W

AWESOME! Thank You So Much Abd and Aaron! Really starting to see how css
works now, really cool! :) So much better than tables!!! You guys rock!

Bigcasey and Boku, you guys rock too, just couldnt figure out your solution ;)