White Space between vertical nav bar and paragraph

Question

I have some mysterious white space that I don't know how to get rid of. I have a vertical list and I want it to be right next to the paragraph with text. Here is my HTML and CSS

SOLVED BY jmgem I ALSO HAD TO READJUST THE SIZE OF MY PARAGRAPH ELEMENT SO IT WOULD FIT BESIDE THE NAV BAR

HTML

<div id="classOfferingList" class="classOfferingList" align="left">
    <ul>
        <li>
            <a href="" >General U.S. K-12 English Speaking Course</a>
        </li>
        <li>
            <a href="" >University Preperation Course</a>
        </li>
        <li>
            <a href="" >SAT Preperation Course</a>
        </li>
        <li>
            <a href="" >GRE Preperation Course</a>
        </li>
    </ul>
</div>
<div id="classOfferingInfo" >
    <p>example text</p>
</div>

CSS

.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
  margin: 5px 0px;
}

.classOfferingList ul li a {
  list-style:  none;
  margin: 1px 0px;
  display: inline-block;
  background-color: blue;
  width: 35%;
  text-align: center;
}

Answer 1

First of all, I copied your code into jsfiddle. Go on in and have a look.

http://jsfiddle.net/GyuX5/

If I understand your question correctly, you wanted to put the paragraph right next to the vertical menu. So here's your adjusted CSS

.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
   margin: 5px 0px;
}

.classOfferingList ul li a {
  list-style:  none;
  margin: 0px;
  display: inline-block;
  background-color: grey;
  text-align: center;
  width: 150px;
}

#classOfferingInfo {
    display: inline-block;
}

I had your paragraph display as an inline-block, then I changed the width of the li a to 150px instead of 35%. Voila.

Chose not to use a left float as they tend to disrupt layouts as they become more complicated. try to imagine html/css as blocks filling up a row in the browser from left to right.

Answer 2

Try floating the two main div to the left then they will be right next to each other. See Fiddle

.classOfferingList {
    float: left;
}
.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
  margin: 5px 0px;
}
#classOfferingInfo {
    float: left;
}
.classOfferingList ul li a {
  list-style:  none;
  margin: 1px 0px;
  display: inline-block;
  background-color: blue;
  width: 35%;
  text-align: center;
  color: #fff;
}

Answer 3

http://jsfiddle.net/erenyener/TC856/

#classOfferingList > ul
{
    padding:0px;
}

you need to reset ul element

or your question could be this

FIDDLE