A couple issues - divs not lining up and paragraph spacing

miner2049er · June 29, 2011, 5:35am

I’m having two problems over at:

(1) My two div columns are not lining up, even though I’ve dug in deep in to the code.

(2) I’ve got a blank line in front of my indented paragraphs, which I would like to remove but doesn’t even when adding a top margin/padding of 0px to the <p> tag.

Does anyone have any advice?

Here’s the code, with all CSS inline:


<div style="width: 600px; margin: 0px auto;">
<div id="menu-left" style="margin: 5px; padding: 5px; float: left; width: 280px; background: #9c9;">
<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>APPETIZERS</strong></div>
<strong>Garlic Bread    3</strong>

<strong>Garlic Parsley Fries    6</strong>

<strong>Mozzarella Marinara    7</strong>

<strong>Insalata Caprese    7</strong>
<p style="padding-left: 30px;"><em>creamy mozzarella tomato,
basil &amp; kalamata olive</em></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>SOUP</strong></div>
<div style="padding-left: 120px;">cup bowl</div>
<strong>Minestrone</strong><span style="padding-left: 50px;"><strong>5    7</strong></span>
<strong> </strong><strong> </strong>

<strong>Stracciatella</strong><span style="padding-left: 40px;"><strong>5    7</strong></span>
<p style="padding-left: 30px;"><em>roman egg drop soup with chicken, spinach, parsley and cheese</em></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>CHOPPED SALADS</strong></div>
<strong>Jane&#8217;s Original</strong>
<p style="padding-left: 30px;"><em>tomato, onion, cucumber, green olive, mushroom, mozzarella</em>
<em> with low cal sesame dressing</em> <strong>11</strong></p>
<strong>Ventura</strong>
<p style="padding-left: 30px;"><em>tomato, garbanzo beans, onions, mozzarella and tuna salad</em> <strong>12</strong></p>
<strong>Woodman</strong>
<p style="padding-left: 30px;"><em>tomato, onions, cucumbers, feta cheese and olives with low cal sesame dressing</em> <strong>9</strong></p>
<strong>Italian</strong>
<p style="padding-left: 30px;"><em>tomato, salami, ham and mozzarella</em> <strong>10</strong></p>
<strong>PCH</strong>
<p style="padding-left: 30px;"><em>tomato, garbanzo beans, kidney beans, onions, mozzarella and tuna</em> <strong>12</strong></p>

<div style="margin: 15px; background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;">
<div><span style="text-decoration: underline;"><strong>Add-ons</strong></span></div>
<em><span style="color: #000000;">chicken, ham, salami, parma prosciutto, tuna or shrimp <strong>3</strong></span></em>

<em><span style="color: #000000;">tomato, cucumber, pepperoncinis, capers, beans, olives, anchovies,</span></em>
<em><span style="color: #000000;"> onion, mushrooms, parmesan or mozzarella<strong> 2</strong></span></em>

</div>
<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>SALADS</strong></div>
<strong>Vitello&#8217;s House</strong>
<p style="padding-left: 30px;"><em>tomato, mushroom, garbanzo beans, kidney beans,</em> <em>bleu cheese, vinaigrette or ranch dressing</em> <strong>7</strong></p>
<strong>Classic Caesar    9</strong>

<strong>Chicken Arugula</strong>
<p style="padding-left: 30px;"><em>baby arugula, cherry tomato, pine nuts, goat cheese with tarragon dressing</em> <strong>12</strong></p>
<strong>Italian Greek</strong>
<p style="padding-left: 30px;"><em> </em><em>cucumber, kalamata olive, artichoke, cherry tomato, garbanzo beans, basil and goat cheese</em> <strong>11</strong></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>PANINI</strong></div>
<strong>Italian</strong>
<p style="padding-left: 30px;"><em>parma prosciutto, tomato, basil aioli and mozzarella<strong> 12</strong></em></p>
<strong>Classic</strong>
<p style="padding-left: 30px;"><em>parma prosciutto, salami, robiola cheese, arugula,with homemade tapenade spread</em> <strong> 13</strong></p>
<strong>Grilled Veggie</strong>
<p style="padding-left: 30px;"><em>eggplant, tomato, arugula, mushrooms, with goat cheese</em> <em>and basil garlic spread</em> <strong>11</strong></p>
<strong>Tuna Melt</strong>
<p style="padding-left: 30px;"><em>tomato spread, arugula, tapenade spread, sharp chedder on olive bread</em> <strong>12</strong></p>
<strong>Chicken Pesto</strong>
<p style="padding-left: 30px;"><em>grilled chicken breast with cheese</em> <strong>12</strong></p>
<strong>BBQ Chicken</strong>
<p style="padding-left: 30px;"><em>sautéed onions, mozzarella</em> <strong>12</strong></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>SANDWICHES</strong></div>
<strong>Chicken Parmigiana    12</strong>
<strong> Sausage and Peppers    11</strong>
<strong>Meatball    11</strong>
<strong> Eggplant Parmigiana    11</strong>

<strong>Tuna</strong>
<p style="padding-left: 30px;"><em>tomato, arugula with homemade tapenade spread on olive bread </em><strong>12</strong></p>
<strong>Italian Cold Cuts</strong>
<p style="padding-left: 30px;"><em>parma prosciutto, salami, ham, arugula with homemade</em>
<em>tapenade spread</em> <strong>12</strong></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>BURGERS</strong></div>
<p style="text-align: center;"><em>served with garlic fries or potato salad</em><strong> </strong></p>
<strong> </strong><strong>Turkey and Mushroom</strong>
<p style="padding-left: 30px;"><em>onion, tomato and gorgonzola cheese with sesame miso spread</em> <strong>9</strong></p>
<strong>Vitello Burger</strong>
<p style="padding-left: 30px;"><em>beef with prosciutto, cheese, tomato and onion</em> <strong>10</strong></p>

</div>
<!-- end menu-left -->
<div id="menu-right" style="margin: 5px; padding: 5px; float: right; width: 280px; background: none repeat scroll 0% 0% #99cc99;">
<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>ENTREES</strong></div>
<strong>Emily&#8217;s Capellini Pomodoro</strong>
<p style="padding-left: 30px;"><em>parma prosciutto, tomato, basil aioli and mozzarella </em><strong> 12</strong></p>
<strong>Spaghetti and Meatballs 10</strong>

<strong>Penne Arrabbiata</strong>
<p style="padding-left: 30px;"><em>light, spicy tomato sauce with garlic and basil</em> <strong> 9</strong></p>
<strong>Penne Siciliana</strong>
<p style="padding-left: 30px;"><em>sun-dried tomatoes, garlic, olive oil, chicken and broccoli</em> <strong> 11</strong></p>
<strong>Fettucini Alfredo</strong>
<p style="padding-left: 30px;"><em>traditional cream sauce</em> <strong>10</strong></p>
<strong>Jon&#8217;s Lasagna 10</strong>

<strong>Three Cheese Ravioli</strong>
<p style="padding-left: 30px;"><em>ricotta, fontina, and parmesan ravioli with marinara sauce</em> <strong>10</strong></p>
<strong>Baked Ziti</strong>
<p style="padding-left: 30px;"><em>ricotta and meat sauce topped with mozzarella</em> <strong>10</strong></p>
<strong>Chicken Piccata</strong>
<p style="padding-left: 30px;"><em>lemon butter, capers, and fresh mushrooms in a white wine sauce over linguine</em> <strong> 12</strong></p>
<strong>Chicken Parmigiana</strong>
<p style="padding-left: 30px;"><em>breaded chicken breast baked and topped with mozzarella and homemade marinara over spaghetti</em> <strong>12</strong></p>
<strong>Eggplant Parmigiana</strong>
<p style="padding-left: 30px;"><em>roasted eggplant, breaded and baked, topped with mozzarella and homemade marinara over capellini</em> <strong>11</strong></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>PIZZETTI</strong></div>
<p style="text-align: center;"><strong> </strong><em>light, ultra thin crust pizza! crispy and delicious!</em>
<strong>
Margherita     Garlic     Pesto 9
</strong></p>

<div style="background: none repeat scroll 0% 0% #ffff00; color: #ff0000; text-align: center;"><strong>PIZZAS</strong></div>
<p style="text-align: center;"><em>choose traditional crust or</em>
<em>chicago pan style add</em> <strong>2</strong>
<strong>Toppings</strong>
<em>pepperoni, sausage, salami, meatball, prosciutto, ham, onion, olive,</em>
<em>mushroom, garlic, tomato, bell pepper, artichoke heart, sun-dried tomato,</em>
<em>pepperoncini, anchovy, jalapeno, pineapple add <strong>$1</strong> ea.</em>
<strong>PIZZA BY THE SLICE 2.50</strong>
<em><strong>.50</strong> per topping</em></p>

<table border="0" cellspacing="0" width="280px">
<tbody>
<tr>
<td style="text-align: right;"><strong>10" </strong></td>
<td><strong>11"</strong></td>
<td><strong>13"</strong></td>
<td><strong>15"</strong></td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%"><strong>Traditional Cheese</strong><span style="float: right;">9 </span>
<em><strong>$1.00</strong> per topping</em></td>
<td style="border-top: 1px #000 solid;" valign="top">11</td>
<td style="border-top: 1px #000 solid;" valign="top">13</td>
<td style="border-top: 1px #000 solid;" valign="top">15</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>Veggie Combo</strong>
<em> mushroom, tomato, onion, olive, bell pepper</em></td>
<td style="border-top: 1px #000 solid;" valign="top">15</td>
<td style="border-top: 1px #000 solid;" valign="top">17</td>
<td style="border-top: 1px #000 solid;" valign="top">19</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>Three Cheese</strong>
<em>mozzarella, gorgonzola, goat cheese</em></td>
<td style="border-top: 1px #000 solid;" valign="top">13</td>
<td style="border-top: 1px #000 solid;" valign="top">15</td>
<td style="border-top: 1px #000 solid;" valign="top">17</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>Italian Greek Pizza</strong>
<em>kamalata olive, sun-dried tomato, artichoke heart, goat cheese, prosciutto, garlic and basil</em></td>
<td style="border-top: 1px #000 solid;" valign="top">16</td>
<td style="border-top: 1px #000 solid;" valign="top">18</td>
<td style="border-top: 1px #000 solid;" valign="top">20</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>Vitello's Special</strong>
<em>pepperoni, sausage, salami, meatball, onion, olive, tomato, bell pepper</em></td>
<td style="border-top: 1px #000 solid;" valign="top">17</td>
<td style="border-top: 1px #000 solid;" valign="top">19</td>
<td style="border-top: 1px #000 solid;" valign="top">21</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>White Pizza</strong>
<em>olive oil base, spinach, tomato, garlic, ricotta, mozzarella</em></td>
<td style="border-top: 1px #000 solid;" valign="top">15</td>
<td style="border-top: 1px #000 solid;" valign="top">17</td>
<td style="border-top: 1px #000 solid;" valign="top">19</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>Hawaiian</strong>
<em>pineapple and ham</em></td>
<td style="border-top: 1px #000 solid;" valign="top">13</td>
<td style="border-top: 1px #000 solid;" valign="top">15</td>
<td style="border-top: 1px #000 solid;" valign="top">17</td>
</tr>
<tr>
<td style="border-top: 1px #000 solid;" width="70%" valign="top"><strong>BBQ Chicken</strong>
<em>barbeque sauce, cilantro, red onion, grilled chicken</em></td>
<td style="border-top: 1px #000 solid;" valign="top">16</td>
<td style="border-top: 1px #000 solid;" valign="top">18</td>
<td style="border-top: 1px #000 solid;" valign="top">20</td>
</tr>
</tbody>
</table>
</div>
<!-- end menu-right -->

</div>
<!-- end menu-wrap -->

ralphm · June 29, 2011, 6:57am

The second column is dropping because of this:

<p><!-- end menu-left --></p>

Not sure what you mean by the blank line in indented paras. What browser are you viewing in?

miner2049er · June 29, 2011, 7:10am

Thanks, something the tinyMCE was doing generated the <p><!-- end menu-left –></p> A lot of fiddling about fixed that. Still walking on eggshells whenever I use that tinyMCE interface!

So, with regards to the spacing/blank line above paragraphs, I’m viewing in both IE 8 and FF5.

I would like to see, for example “creamy mozzarella tomato,” right underneath “Insalata Caprese 7”.

system · June 29, 2011, 7:23am

Why are those elements recieving emphasis when they appear to be headings and their content? What’s with all the redundant/pointless inlined style? There are these other tags called “numbered headings”, “table headings” and “captions” you really might want to familiarize yourself with.

Kicking whichever CMS that is in the junk in terms of the endless ID’s and classes for nothing in the output might not hurt either.

Though yeah, TinyMCE is a train wreck; as are 99.99% of WYSIWYG’s if you care about code that actually works.

In any case, that’s like three times the HTML necessarily for the layout, and a horde of inlined style that has no business in the HTML.

ralphm · June 29, 2011, 8:07am

In terms of the spacing issue, the gap is caused by the bottom padding on the paragraphs. A solution for that would be to place all the text into a single paragraph instead of making them separate. E.g.

<p><b>Insalata Caprese 7</b> <i>creamy mozzarella tomato,<br>
basil & kalamata olive</i></p>

Then in your CSS file, add this:

.entry-content i {display: block; padding-left: 30px;}