Joshua de Leon Joshua de Leon - 1 month ago 15
CSS Question

White Space between vertical nav bar and paragraph

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

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.