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;
}

It's likely that the `inline-block` elements are causing this. See [this answer](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859) — Josh Crozier, Mar 14 '14 at 03:08
@JoshCrozier Thanks for the answer but that didn't change anything. — Joshua de Leon, Mar 14 '14 at 03:22
Is this something you were looking for http://jsfiddle.net/32q6y/ *Changed your text color because I couldn't see it :p — Cup of Java, Mar 14 '14 at 03:26
@user3010773 Thats closer to what I was wanting. The problem is I want the text to sit with the nav bar. Like how in books they have the one large letter with the rest of the text around it. — Joshua de Leon, Mar 14 '14 at 03:42

score 1 · Accepted Answer · answered Mar 14 '14 at 03:29

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.

Hey thanks this pretty much fixed what I needed. I had to adjust the paragraph size as well (little bugger decided to go below my nav bar). Thanks for the help! — Joshua de Leon, Mar 14 '14 at 03:45

score 0 · Answer 2 · answered Mar 14 '14 at 03:24

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;
}

score 0 · Answer 3 · answered Mar 14 '14 at 03:27

0

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

#classOfferingList > ul
{
    padding:0px;
}

you need to reset ul element

or your question could be this

FIDDLE

answered Mar 14 '14 at 03:27

Mehmet Eren Yener

2,006
1
23
37

White Space between vertical nav bar and paragraph

3 Answers3