How to float text around an image in a bulleted list

Hello. I have a page where I have images floated to the right.  But the image that comes before the bullet list pushes the text up or down on the page and leaves a bunch of white space.  Can someone tell me how to fix it? My code is below.  The problem is with the image named campusPic.jpg:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="heels2.aspx.vb" Inherits="heels2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/igc.ms.styles.css?ver=1" rel="stylesheet" type="text/css" /> 
    <link href="/core.css?ver=1" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/styles.css" media="screen" />
    <link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet" />
    <script type="text/javascript" src="/js.js?ver=1"></script>
</head>
<body>
    
    <form id="form2" runat="server">
   

<%--<div style="width: 100%; height: 169px; background-image: url('http://localhost:51150/images/headerBg.gif');">--%>
<div style="width: 100%; height: 169px; background-image: url('/images/headerBg.gif');">
   <table cellpadding="0" cellspacing="0" border="0" width="960" align="center" runat="server" id="Table2" style="">
      <tr>
         <td style="height: 131px;" valign="top">
            <a href="/" class="noBorder"><img src="/images/logo.gif" height="112" width="340" alt="The Carolina Institute for Developmental Disabilities at UNC" border="0" /></a>
         </td>
         <td style="height: 131px;" align="right" valign="middle" class="">
             &nbsp;</td>
      </tr>
      <tr>
         <td style="height: 38px;" colspan="2">
            <table border="0" cellpadding="0" cellspacing="0" width="960" style="height: 38px;">
               <tr>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdHome" class="menu" valign="middle"><a href="/" class="noBorder" style="padding: 9px 8px 0px 8px;"><img src="/images/home.gif" width="23" height="16" alt="Home" border="0" /></a></td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdServices" class="menu">
                     <a href="/Services" class="noBorder">Services</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdEducation" class="menu">
                     <a href="/Education" class="noBorder">Education</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdResearch" class="menu">
                     <a href="/Research" class="noBorder">Research</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdFamilies" class="menu">
                     <a href="/Families" class="noBorder">For Families</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdAbout" class="menu">
                     <a href="/About" class="noBorder">About Us</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdSupport" class="menu">
                     <a href="/Support" class="noBorder">Support the Institute</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdDirectory" class="menu">
                     <a href="/Directory" class="noBorder">Directory</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdContact" class="menu">
                     <a href="/Contact" class="noBorder">Contact Us</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</div>

   <div style="width: 100%; background-color: #fff;">
      <table cellpadding="0" cellspacing="0" border="0" width="970" border="0" align="center">
         <tr>
            <td class="content">               
                <div class="container">
                    <div class="page-header text-center">
                        <br />
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/mainHeading2.gif" />
                        <%--<h1 style="font-family: 'Shrikhand', cursive;">HEELSUP</h1>--%>
                    </div>
                </div>

                <ul class="nav nav-pills justify-content-center">
                    <li class="nav-item"><a class="nav-link active" href="default.aspx" style="background-color: #6699cc">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="apply.aspx">Apply</a></li>
                    <li class="nav-item"><a class="nav-link" href="overview.aspx">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="support.aspx">Support & Volunteers</a></li>
                    <li class="nav-item"><a class="nav-link" href="match.aspx">Is HEELSUP a Good Match for Me?</a></li>
                    <li class="nav-item"><a class="nav-link" href="contact.aspx">Contact</a></li>
                </ul>
                <br />
                <div class="container">
                    <div class="content">
                        <asp:Image ID="Image2" runat="server" ImageUrl="~/images/heelsUp.jpg" ImageAlign="Right" />
                        <p style="text-align:justify">HEELS UP (Higher Education, Employment, and Living Success University Participant Program)</p>
                        <h3>Program Overview: </h3>
                        <p style="text-align:justify">HEELS UP Program provides an inclusive, two-year, on-campus living and learning experience for college-aged persons with intellectual disabilities. The goal of the program is to facilitate HEELS UP students' transition from secondary school to adult life with education, employment and independent living.  </p>

                        <p style="text-align:justify">HEELS UP students live in on-campus dormitories distributed throughout university residence halls under the same university policies that apply to all University of North Carolina at Chapel Hill students. On-campus life is fully integrated and inclusive. </p>

                        <p style="text-align:justify">The University of North Carolina at Chapel Hill undergraduate students are recruited to provide paid and unpaid support to facilitate HEELS UP Students living on campus, attending classes, engaging in social and recreational activities, becoming involved in student organizations and developing friendships.</p>

                        <h3>Program Purpose:</h3>
                        <p style="text-align:justify">HEELS UP is designed to provide a two-year, on-campus living and learning experience for college-age persons with intellectual disabilities. During the two-year period, students are expected to complete requirements for receiving a HEELS UP Certificate of Accomplishment based on the successful completion of an Individual Plan for College Participation.</p>

                        <p style="text-align:justify">HEELS UP students are not eligible for an undergraduate or graduate degree from the university. They are permitted to audit individual courses as part of their HEELS UP Program and required to pay appropriate fees for these courses as well as other university costs (i.e., housing, meal plan, student activities, etc).  </p>
                        
                        <h3>Program Outcomes:</h3>
                        
                        <p style="text-align:justify">The HEELS UP Certificate of Accomplishment is awarded after a two-year period based on satisfactory completion of five program components. These components include the following:</p>
                            <ul style="list-style-type: disc">
                              <li>&#8226 Personal development skills (e.g., communication skills, personal care skills, self-determination, etc.)</li>
                              <li>&#8226 Community participation skills (e.g., using public transportation, budgeting, grocery shopping, etc.)</li>
                              <li>&#8226 Vocational preparation skills (e.g., learning specific job skills on or off campus)</li>
                              <li>&#8226 Social participation and learning (e.g., participating in university functions such as athletic events, belonging to university clubs or organizations)</li>
                              <li>&#8226 Course auditing (e.g., auditing three to four courses per semester)</li>
                            </ul>
                        <asp:Image ID="Image2b" runat="server" ImageUrl="~/images/campusPic.jpg" style="padding:0.15px; float:right" />

                        <p style="text-align:justify">Note: Participants must pay current university fees for auditing courses.</p>

                        <p style="text-align:justify">At the completion of the two-year period, students will be eligible for a UP Certificate of Accomplishment based on the following criteria:</p>
                            <ul>
                              <li>&#8226 Completion of 1,800 hours of learning activities over a four-semester period (450 hours per semester)</li>
                              <li>&#8226 Achievement of at least 80 percent of the objectives per semester within each component of the IPCP</li>
                              <li>&#8226 Recommendation for a UP Certificate of Accomplishment by the UP Co-Directors and Program Steering Committee</li>
                            </ul>
              
                    </div> <%--Close content div--%>
                </div> <%--Close Ccontainer div--%>


                <%--<div class="container text-center">
                    <img src="images/main.jpg" alt="" />
                </div>--%>

            </td>
         </tr>
      </table>
   </div>
   <div style="background-image: url(/images/footerBg.gif); height: 150px;">
   <table cellpadding="0" cellspacing="0" border="0" width="970" align="center">
   <tr>
      <td valign="top">
         <div style="margin-top: 15px;" class="gry large bold">
            <%--<div class="fr" style="margin-right: 14px;"><a href="http://www.facebook.com/unccidd" target="_blank" title="Follow us on Facebook"><img src="/images/icon_facebook.png" height="23" width="23" alt="Follow us on Facebook" /></a></div>
            <div class="fr" style="margin-right: 8px;"><a href="http://twitter.com/UNCCIDD" target="_blank" title="Follow us on Twitter"><img src="/images/icon_twitter.png" height="23" width="23" alt="Follow us on Twitter" /></a></div>--%>
            Copyright <%=Now.Year%> The Carolina Institute for Developmental Disabilities
         </div>
         
         <div style="margin-top: 28px" class="small ltgry">
            <a href="/" class="bold" style="color: #6699cc;">Home</a> &nbsp;|&nbsp; 
            <a href="/Services" class="bold" style="color: #6699cc;">Services</a> &nbsp;|&nbsp; 
            <a href="/Education" class="bold" style="color: #6699cc;">Education</a> &nbsp;|&nbsp; 
            <a href="/Research" class="bold" style="color: #6699cc;">Research</a> &nbsp;|&nbsp; 
            <a href="/Families" class="bold" style="color: #6699cc;">For Families</a> &nbsp;|&nbsp; 
            <a href="/About" class="bold" style="color: #6699cc;">About Us</a> &nbsp;|&nbsp; 
            <a href="/Support" class="bold" style="color: #6699cc;">Support The Institute</a> &nbsp;|&nbsp; 
            <a href="/Contact" class="bold" style="color: #6699cc;">Contact Us</a> &nbsp;|&nbsp; 
         </div>
      </td>
   </tr>
   </table>

</div>
   </form>
   
</body>
</html>

Open in new window

cdlcidditAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Sample code/data

I would need to know the css being applied.  Do you have a sample page say on jsbin/jsfiddle or can you attach all the css you're using please.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
When posting your code here, please fully render the html and not just the .net code. In other words, run the html in the browser, view the source, copy and paste.  You have .net code mixed in here.
cdlcidditAuthor Commented:
Hello @rob.  I figured it out.  Not sure if this was the correct thing to do but I put an overflow: hidden style on the ordered list.  

.content ul, 
.content ol {
    overflow: hidden;
}

Open in new window


That got rid of all the white space and wrapped the text around the image.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cdlcidditAuthor Commented:
Hello @Scott Fell, EE MVE.   Sorry for the messy submission.  I didn't know what was meant by render the code here.  Now I know to copy and paste the source from the browser.  Thank you for the help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.