Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Text in block not displaying properly

Posted on 2016-11-29
Medium Priority
Last Modified: 2016-11-29
I added an extra row in the menu in the top left quadrant of this page: http://www.sonoma.edu/exed/

This resulted in the text in the space below the menu to bump up against the line below it. I would just like create more space for the text so that it displays fully and the line in that quadrant and the one next to it, on the right-hand-side, remained lined up together (like they do now).

I am assuming some changes also need to be made to the CSS in addition to the HTML on the page.

Would appreciate any help.
Question by:geeta_m9
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 2000 total points
ID: 41906571
The html is a bit munged to be honest.

.audience-category set to height 370px;

.audience-category {
    width: 360px;
    float: left;
    height: 370px;

Open in new window

Delete blank p tags where you have <p style="height: 240px"></p>
<div id="audience-content">
<div class="audience-category">

<div class="audience-block-left">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/degree-programs.jpg" height="150" width="135">
<h2><a href="https://www.sonoma.edu/exed/degrees">Academic Credit &amp; <br>Degree Programs,</a><br><a href="http://www.sonoma.edu/exed/intersession/">Summer/Intersession</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<li><a href="https://www.sonoma.edu/exed/libs/">Saturday B.A. Libs (at SSU)</a></li>
<li><a href="https://www.sonoma.edu/exed/napa-solano/">B.A. Libs Napa Valley/Solano</a></li>
<li><a href="https://www.sonoma.edu/exed/orgdev/">M.A. Organization Development</a></li>
<li><a href="https://www.sonoma.edu/depth/">M.A. Psychology (Depth)</a></li>
<li><a href="https://www.sonoma.edu/exed/spanish/">M.A. Spanish</a></li>
<li><a href="http://sonoma.edu/mba/programs/sonoma-executive-mba.html">Executive M.B.A.</a></li>
<li><a href="https://www.sonoma.edu/engineering/msces/">M.S. Computer &amp; Engineering</a></li>
<li><a href="https://www.sonoma.edu/exed/film">M.A. in Film Studies</a><span style="color:green">- <b>New!</b></span></li>
<li><a href="https://www.sonoma.edu/exed/ece-certificate">Early Childhood Education Certificate</a><span style="color:green">- <b>New!</b></span></li>
</div><!-- end audience-block-right -->

<p style=" height:=" "="" 218px"=""></p><p></p>
<p>The School of Extended &amp; International Education offers a multitude of academic credit and degree programs to meet the needs of our growing university. Whether you are interested in graduating sooner through our Summer Session or Winter Intersession courses or getting your Master's in Spanish, we have a lot to offer!</p>

</div><!-- end audience-category --><a href="https://www.sonoma.edu/exed/ece-certificate">

</a><div class="audience-category"><a href="https://www.sonoma.edu/exed/ece-certificate">

</a><div class="audience-block-left"><a href="https://www.sonoma.edu/exed/ece-certificate">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/certificate-programs.jpg" height="150" width="135">
</a><h2><a href="https://www.sonoma.edu/exed/ece-certificate"></a><a href="https://www.sonoma.edu/exed/certificates/">Professional Development Certificate Programs</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<li><a href="https://www.sonoma.edu/exed/pmcp/agile-project-management-certificate-course.html">Agile Project Management</a><span style="color:green">- <b>New!</b></span></li>
<li><a href="https://www.sonoma.edu/exed/pmcp/project-management-certificate-course.html">Project Management</a></li>
<li><a href="https://www.sonoma.edu/exed/beer/">Craft Beer Appreciation<br></a></li>
<li><a href="https://www.sonoma.edu/exed/construction/">Construction Management</a></li>
<li><a href="https://www.sonoma.edu/exed/carp/">Audio &amp; Recording Production</a></li>
<li><a href="https://www.sonoma.edu/exed/maker-certificate/">Maker Certificate</a></li>
<li><a href="https://www.sonoma.edu/exed/human-resource/">Human Resource Management</a></li>
<li><a href="https://www.sonoma.edu/exed/certificates">and more...</a></li>

</div><!-- end audience-block-right -->

<p style="height: 218px"></p>
<p>Throughout the year, the School of Extended &amp; International Education offers a wide variety of innovative, high quality professional development courses and certificates. We take pride in creating learning opportunities for career advancement, career change, and personal growth. Many courses are scheduled on weekends and evenings, and online for the busy adult.</p>

</div><!-- end audience-category -->

<p style="height: 350px"></p>

<div class="audience-category">

<div class="audience-block-left">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/olli-icon-home.jpg" width="135">
<h2><a href="https://www.sonoma.edu/exed/lifelong-learning/">Lifelong Learning Programs</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<li><a href="https://www.sonoma.edu/exed/olli/">Osher Lifelong Learning Institute</a></li>
<li><a href="https://www.sonoma.edu/exed/excel/">EXCEL for Youth</a></li>

</div><!-- end audience-block-right -->

<p style="margin-left: 155px; margin-top: 5px">Our Life-long Learning Programs offer learning opportunities for a wide variety of students from all age groups. OLLI is a unique learning community for adults aged 50 or better and the EXCEL for Youth Program offers students entering grades 4-9 a unique opportunity for academic enrichment.</p>

</div><!-- end audience-category -->

<div class="audience-category">

<div class="audience-block-left">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/international-programs.jpg" height="150" width="135">
<h2><a href="https://www.sonoma.edu/exed/international/">International Education</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<li><a href="http://www.sonoma.edu/exed/ssali/">Sonoma State American Language Institute (SSALI)</a></li>
<li><a href="https://www.sonoma.edu/cie/">Center for International Education</a></li>
</div><!-- end audience-block-right -->

<p style="margin-left: 155px; margin-top: 5px">Whether you are an international student considering studying abroad at Sonoma State or are already enrolled and want to take your studies abroad, our International Programs have great opportunities for you to explore and enjoy a rich international experience!</p>

</div><!-- end audience-category -->

<p style="height: 240px"></p>

Open in new window

That code should really be something like
<div class="box">
     <div class="box-left">
               <img src="somthing.jpg">
               <div class="image_tag">Tag Line</div> 
   <div class="box-right"><ul><li>list</li></ul></div>
  <div class="box-full">
      <p>Your paragraphs</p>
     <p>Your paragraphs</p>

Open in new window

Or use a grid system like bootstrap may be easier.

Author Closing Comment

ID: 41906581
Your solution worked great!

Thank you!

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question