simple CSS problem!

all i need us the 3 names of the people to appear on the same exact line but for some reason their each appearing on their own line. whats wrong with my code? I just want the names Lauren Woodiwiss, Amy Dingerling, and Gloria Essenwein to appear on the same line with lauren's name being to the left, amy's name being in the middle and gloria's name being to the right all on the SAME LINE!! What simple change in my code do i need to make? I also have a div id="center" tag calling the class but for some reason its not showing on here within the code.

#center {font-family: Arial, Bodoni mt black, Arial, Helvetica, sans-serif;
         color:#000066;
         padding: 0px 100px 150px 3px;
         border-top: 1px solid #000000;
         background-image:url(lighttapshoes.jpg);
         background-repeat:no-repeat;
         background-position:center;
        }
<div id="center">
<p align="center"><b>Cincinnati Taps Inc. Board Members</b><hr size="2" color=#000000/>
 <p align ="left"><b><u>Lauren Woodiwiss</b></u></p>
 <p align ="center"><b><u>Amy Dimmerling</b></u></p> 
 <p align ="right"><b><u>Gloria Esenwein</b></u></p>  
 
 <a href="http://www.cincinnatitapsinc.org/Board%20Members/Lauren.htm"><img src="ctiboardmember1.jpg" alt="Lauren Woodiwiss" align="left" height="200" width="180" /></a>
 <a href="http://www.cincinnatitapsinc.org/Board%20Members/Gloria.htm"><img src="ctiboardmember2.jpg" alt="Gloria Esenwein" align="right" height="200" width="180" /></a>
 <a href="http://www.cincinnatitapsinc.org/Board%20Members/Amy.htm">&nbsp&nbsp&nbsp&nbsp&nbsp<img src="ctiboardmember3.jpg" alt="Amy Dimmerling" align="middle"" height="200" width="180" /></a><br/><br/><br/><br/><br/>
 <p align ="left"><b><u>Shirley Gumbs</b></u></p>
 <p align ="right"><b><u>Jamie Meyers Eaton</b></u></p>
 <a href="http://www.cincinnatitapsinc.org/Board%20Members/Shirley.htm"><img src="ctiboardmember4.jpg" alt="Shirley Gumbs" align="left" height="200" width="180" /></a>
  <a href="http://www.cincinnatitapsinc.org/Board%20Members/Jamie.htm"><img src="ctiboardmember5.jpg" align="right" alt=" Jamie Meyers Eaton" height="200" width="180" /></a>
</div>

Code (markup):

 

To achieve your set up here is the css...

/* style for container div */

#container {
width: 700px;
margin: 0 auto;
}

/* style for text to be aligned left */

p#left {
float: left;
width: 230px;
}

/* style for text to be aligned right */

p#right {
float: right;
width: 230px;
text-align: right;
}

/* style for text to be aligned center */

p#center {
display: block;
width: 230px;
margin: 0 auto;
text-align: center;
}

Code (markup):

And the HTML... (Note order of the p's is important)

<div id="container">
<p id="left">left text</p>
<p id="right">right text</p>
<p id="center">center text</p>
</div>

Code (markup):

 

they are all on seperate lines because they are all contained within p tags which is a block element and they are automatically cleared. you can adjust the presentation of the element to show as an inline element by adding 'display:inline' to the style.

if you want to make all the paragraph tags within the #center id just add the style:

#center p {
  display:inline;
}

Code (markup):

hope that helped

 

i wouldnt use <p> since as Mr Blonde stated that its a block element.

i recommend using <span> instead of <p>. the code would be same as above