aligning text with image using using dreanvweaver cc

Report · Dec 21, 2024

I am trying to align text with an imahe the folloeing is the css for the image and html

css in external style sheet

.parrotimg {
float left;
margin: 0 10px 10px 10px;
width: 195px;
height: 156px;
}

I then added the html

However, I dont know the css to align text with image

Report · Dec 21, 2024

CSS:

.parrotimg {
  float: left;
  margin: 0 10px 10px 0; /* Adjust margins as needed */
}

.parrotimg img {
  width: 195px;
  height: 156px;
  display: block; /* Ensures the image is treated as a block element */
}

HTML:

<div class="parrotimg">
  <img src="Images/red_parrot_on_computer_lg_clr_6287.gif" alt="Parrot">
</div>
<p>Text goes here</p>

Explanation:

Float: The float: left; property makes the image float to the left, allowing text to wrap around it.

Margin: Adjusting the margins ensures there's space around the image so the text doesn't stick right up against it.

Display: Setting the image to display: block; ensures it behaves as a block element, preventing any inline display issues.

Wappler, the only real Dreamweaver alternative.

Report · Dec 22, 2024

I have copied the CSS and HTML but the text doesn't wrap If you go to animalandhumannutrition101.com you can see what I've done

Report · Dec 22, 2024

I am sorry, but I cannot connect.

Wappler, the only real Dreamweaver alternative.

Report · Dec 23, 2024

I just got in with no problem. Please try it access again

Report · Dec 23, 2024

I just got in with no problem. Please try it access again

By @cathye39663615

Does that page have the specific code mentioned? I just searched the source and was unable to find the parrotimg class anywhere on that page you link to.

I am seeing other HTML errors though on that page that are causing issues such as in the bullets under the welcome to our site, I see HTML code which is improperly closed and showing up as text leading me to believe that html errors could lead to some issues you may be facing. Can you try validating your page to ensure there are no code errors before making the modifications? https://validator.w3.org/

Report · Dec 23, 2024

HTML

<!DOCTYPE HTML>

<head>

<title>My Story - Animal and Human Nutrition 101</title>

>

<style>

._css3m{

display:none

}

#apDiv2 {

position: absolute;

width: 320px;

height: 65px;

z-index: 1;

top: 45px;

}

</style>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-11078980-17', 'auto');

ga('send', 'pageview');

</script>

</head>

<body>

<nav>

<li><a href="#">About</a>

<ul>

<li><a href="#">My Story</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</li>

<li><a href="https://dynamitespecialty.myvoffice.com/animalandhumannutrition101llc/" target="_blank">Shop Online</a></li>

<li><a href="articlesandvideos.html">Articles</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="#">Animal Nonprofits</a>

<ul>

<li><a href="Images/PDF/Overvuew.pdf">Introduction</a></li>

<li><a href="nonprofit.html">THe Program</a></li>

<li><a href="#">Sample Listing</a></li>

</ul>

</li>

<li><a href="#">Links</a>

<ul>

<li><a href="healthandwellness.html">Health and Wellness</a></li>

</ul>

</li>

</ul>

</nav>

</header>

<h1>My Story</h1>

<p>My story begins with me working in various different jobs and in Sept 1984, I landed a job with a publishing company that would change the trajectory of my life in learning the skills to set up my own business. In Jan 2000 I was given my exit papers. After a lot of thought, and creating a business relationship with Gene Berman, a horse owner and had a successful Internet marketing business. So, I took my severance pay and entered web design school with the goal of becoming a designer for the horse industry; an industry I already loved. In June of 2000, I opened my first business, Web Services Etc., and landed my first client in October! For the next 18 years, I professionally designed websites for horse related businesses</p>

<h2>Introduction to Animal and Human Nutrition</h2>

<p>In 2005, while attending a tradeshow to market my web design business, once again I met someone who would change the direction of my life when I accepted an invitation to attend a Dynamite Specialty Products seminar. This led to my becoming an Independent Distributor for Dynamite Specialty Products with Van Harding as my teacher.</p>

<p>Since I still wanted to do web design while learning all about nutrition and the product line, I attended trade shows with Van learning the ins and outs of nutrition and the business.</p>

<p>Enter my second business, Animal and Human Nutrition 101. My company’s mission statement, “Living A Healthier Life Through Better Nutrition for All Living Things” demonstrates my commitment to educating the public on eating a more natural diet for all species.</p>

<h2>My Love of Horses and the Industry</h2>

<p>My background in the horse industry dates back to the 1960s when my sister, Bonnie and I, purchased the AQHA mare "Poco Sierra". Both Bonnie and I showed her in the late 60's in Halter, Western Pleasure, and Trail. She produced five stud colts and three fillies all top performance horses with two of them shown by myself and Linda Baker, top performance trainer on the West Coast. This was the beginning of my show career and continued until 2017.</p>

<p>"Poco Sierra's" offspring:</p>

<li>Duster's Hussler 1971 AQHA gelding Shown in Halter, Trail Horse, Western Pleasure, and Reining.</li>

<ul>

<li>PCQHA All Around Performance Horse - Imperial Quarter Horse show.</li>

<li>Shown on the Open circuit in Western Pleasure and Reining.</li>

</ul>

<li>"Barnaby Chex" 1973 AQHA Stallion.</li>

<ul>

<li>Champion Reining, Working Cow and Cutting Horse.</li>

<li>1976 PCHJ and SHA Yr End Champion Green Bridle Horse. Ridden by Linda Baker.</li>

<li>1982 VCHA Yr End Champion $100.00 Novice Cutting. Ridden by me</li>

</ul>

<li>"Theresa Chex" 1979 AQHA mare - Reserve Champion Ladies Division 1982 NRCHA SBF, Reno, NV.& awarded NRCHA Certificate of Ability. Owned by ack and Linda Baker</li>

<li>"Two Bars Chex" 1979 AQHA gelding - 5th place Ladies Division 1982 NRCHA SBF, Reno, NV. Owned by Jack and Linda Baker. Sold to Margaret Drown and qualified for the 1987 AQHA World Show placing 7th in Open Sr Reining and earned two ROM's; one in the Amateur division and the other in the Open division. World Show earnings $421.73. NRCHA earnings $343.20</li>

<li>"Jay Are Jones" - 1978 AQHA gelding - Sold as a 4yr old and shown in Reining on the Open show circuit.</li>

<li>“Betty Jones - 1979 AQHA mare - Sold as a weanling for an all-around performance horse prospect.</li>

<li>"Rainy Day Jones" - 1980 AQHA mare. Sold as a yearling for a reining prospect.</li>

<li>"Cassandra Jones" – 1979 AQHA mare. Sold as a yearling for a reining prospect, was injured and used as a broodmare producing several outstanding performance horses.</li>

<li>"Send Her Chex" 1981 AQHA mare - Champion Open Halter ETI Corral 54. Owned by Chris Wilson and shown by me.</li>

<li>"Barnabys Hot Town" (aka "Express") 1983 AQHA gelding - Shown in Roping events on the Open circuit.</li>

<li>"Chex In The Bank" 1983 AQHA mare - Shown on the Open circuit in Trail.</li>

<li>Fred's Shamrock" (aka "LS") 1983 APHA Bay Tobiano Stallion - Used in a small Paint breeding program. Owned by Lynne Cook</li>

<li>"Lucky Chex" 1983 ApHc Black Stallion - Used in a small Appaloosa breeding program.</li>

<li>"King Wimpy Chex" 1982 AQHA gelding - Shown on the AQHA circuit in Team Penning.</li>

<li>"Barnabys Cuidado" 1983 AQHA mare - Shown in Halter on the Open circuit.</li>

<li>"Miss Barnaby Chick" 1985 AQHA mare - Shown in Western Pleasure on the Open circuit.</li>

<li>Pocochex Anniversary 1990 AQHA stalliom - Used in a AQHA breeding program</li>

<li>Tsalvo Chex 1991 AQHA gelding - Shown on the AQHA circuit in Novice and Rookie Youth classes as an all-around performance hprse.</li>

<li>"Barnabys Gem" 1992 AQHA mare - Shown on the AQHA circuit in Team Penning</li>

<li>Docs Chexie Gal 1993 AQHA mare - Shown in AQHA Team Penning</li>

<li>"SR Doc Mahogany Chex" 1994 AQHA Stallion - Used in a Appaloosa and AQHA breeding program in Germany.</li>

</ol>

<li>"Charles Chex" 1975 AQHA Stallion - Champion Reining horse on the East Coast. Sold as a 2yr old</li>

<li>"Kemars Poco Doc" - 1979 AQHA Stallion - Sold as a yearling and used in a breeding program.</li>

<li>"Ima Foxy Ten" - 1981 AQHA mare. Sold as a yearling and used as a broodmare</li>

<li>"Cause Ima Fox" 1982 mare - Sold as a 4year old and shown in NCHA cutting events earning $665.61</li>

<li>1983 "Poco" was carrying a filly by "Leo Bingo", sire of champion cutting horsrs and the fetus died two weeks before she would have given birth. This was her last foal.</li>

</ol>

<p>Barnaby died April 15, 1994 and is burried on our ranch. He died two weeks before his 21st birthday. Since I still had outside mares to breed, I purchased the stallion "Chocolate Mahogany" AQHA Superior Halter horse. I raised four foals from him two I sold and two I campaogned on the AQHA circuit. They were:</p>

<li>"Pass The Mahogandas (aka "Luna"). 1999 AQHA mare She and I turned into a winning team from 2000 to 2006 earning:

<ul>

<li>2000 Year End awards in halter with ETI Nat'l Show Circuit and SVAC-ETI corral 118.</li>

<li>2001 ETI Convention Reserve Champion in 2rs and under Longe Line class.</li>

<li>2001 SVAC/Corral 118 Champion 2yrs and Under Longe Line Futurity.</li>

<li>2003 to 2005 competed in AQHA Novice Amateur and Select Amateur Showmanship placing in several classes.</li>

<li>2004 Year End PCQHA Champion Amateur Pleasure Driving</li>

<li>In 2007 "Luna" produced the AQHA mare "Passing The Sign" (aka "Princess"). She started her show career in 2009 winning:

<ul>

<li>2009 Reserve Champion 2yrs old NSBA HUS Futurity, her first show.</li>

<li>2010 PCQHA Year End Champion Green HUS class</li>

<li>In 2010 NSBA Stallion Stakes 3yrs old HUS class at Santa Barbara</li>

<li>In 2013 class winner Working Hunters</li>

</ul>

</li>

<li>"Luna" returned to the show pen and qualified for the AQHA Novice Championships in 2012 and 2013</li>

</ul>

</li>

<li>"Desert Chocolate" (aka "Freckles")1995 AQHA gelding proving you can cross a halter horse with a performance horse and get beauty, brains and an athlete with "cow horse savy".</li>

<ul>

<li>1996 PCQHA Yr End Reserve Champion Amateur Halter Stallions 2yrs and under class</li>

<li>1997 PCQHA Top 5 Year End Amateur Halter Geldings 2yrs and under</li>

<li>1997 PCQHA Top 10 Year End 2yr old Halter Geldings Open</li>

<li>1998 competed in NRCHA SBF Reno, NV.</li>

<li>1998 Finalist Idaho SBF</li>

<li>2000 PCQHA Year End Top 5 Sr Reining class</li>

<li>2000 Reserve Champion Cow Horse Triumph at Cow Palace</li>

</ul>

</ol>

<p>"Sleepin In Overdrive" 2012 AQHA gelding, was my last partner to show competing in Novice Amateur Showmanship and Amateur Halter Aged Geldings where he was awarded at several AQHA shows Reserve Grand Champion Halter.</p>

<p>One of the highlights of my show career was  riding my sister Kiki's horse "Ivanhoe Jody" to be awarded Champion Amateur Trail Horse at the 1975 National Horse Show at Cow Palace and raising horses with beauty, brains and the ability to perform as an all-around performance horse.</p>

<h2>My Other Passion</h2>

<p>After my dad passed and to honor both my parents in their endeavors in the theater, I formed a Christian theater company with several "like minded: thespians, performing from 2003 to 2008 at surrounding churches and theater venues. Every time I walked on stage for rehearsals, I could hear Dad's voice reminding me "Be on time" and "know your lines". I always felt his presence when performing. Now sem -retired, I live in Thousand Oaks, Ca enjoying retirement and working part time with my nutritional business.</p>

<h2>Article</h2>

<p class="centeralign"><a href="https://www.equineinfoexchange.com/recreation-lifestyle/three-ebsen-sisters-horses-a-legacy-for-the-..." target="_blank">THREE EBSEN SISTERS + HORSES = A LEGACY FOR THE AGES</a></p>

</div>

CSS

@FONT-face {

font-family: Droid Sans;

src: url('../fonts/DroidSans-webfont.eot');

src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');

}

@FONT-face {

font-family: Jenna Sue;

src: url('../fonts/JennaSue-webfont.eot');

src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');

}

@FONT-face {

font-family: News Cycle;

src: url('../fonts/NewsCycle-Regular.eot');

src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');

}

html {

height: 100%;}

* {

margin: 0;

padding: 0;

}

/* tell the browser to render HTML 5 elements as block */

article, aside, figure, footer, header, hgroup, nav, section {

display:block;

}

body {

font: normal 18px arial, sans-serif;

background: #C0CB77;

color: #E6EEB0;

}

p {

padding: 10px 15px 10px 15px;

line-height: 1.5em;

}

.parrotimg {

float: left;

margin: 0 10px 10px 0;

}

.parrotimg img {

width: 195px;

height: 156px;

display: block; /* Ensures the image is treated as a block element */

}

span {

color: lightblue;

}

h1 {

font: normal 400% 'Jenna Sue', arial, sans-serif;

color: lightcyan;

margin: 0;

padding: 5px 0 5px 20px;

}

h2 {

font: normal 250% 'Jenna Sue', arial, sans-serif;

color: lightcyan;

padding: 10px 0 10px 15px;

}

h3 {

font: normal 150% 'trebuchet ms', arial, sans-serif;

padding: 10px 0 15px 15px;

}

h4 {

margin: 0;

padding: 5px 0 5px 0;

font: normal 110% arial, sans-serif;

color: lightblue;

}

h5, h6 {

font: italic 95% arial, sans-serif;

color: lightcoral;

padding-bottom: 15px;

}

h6 {

color: #362C20;

}

a, a:hover {

outline: none;

text-decoration: underline;

color: lightcoral;

}

a:hover {

text-decoration: none;

color: lightcoral;

}

ul {

margin-left: 30px;

padding-left: 10px;

}

ul li {

list-style-type: circle;

line-height: 1.5em;

padding-bottom: 10px;

}

ol {

margin: 5px 10px 5px 40px;

padding: 5px 10px 5px 5px;

}

ol li {

margin: 5px 0 0 10px 100px;

padding: 5px 20px 5px 5px;

}

#main, header, #logo, nav, #site_content, footer {

margin-left: auto;

margin-right: auto;

width: 980px;

}

header {

background: url("../Images/aebanner0624.gif") no-repeat top center;

width: 980px;

height: 158px;

}

.container_24 {

margin: 0 auto;

width: 980px;

background: #565747;

}

.grid_5 {

display:inline;

float: left;

width: 230px;

}

.container_24 .prefix_1 {

padding-left: 75px;

padding-right: 0;

}

.text-1 {

overflow: hidden;

width: 220px;

margin-top: 10px;

padding-top: 10px;

padding-bottom: 10px;

font-weight: bold;

color:#C0CB77;

font-size: 16px;

text-align: center;

border: 1px #C0CB77 solid;

}

.text-1 span {

font-family: 'PT Sans Narrow', sans-serif;

font-weight: normal;

color: #000;

font-size: 21px;

line-height: 2em;

display: inline-block;

float: left;

margin-right: 10px;

min-height: 40px;

}

.text-1 strong {

font-family: 'Holtwood One SC', serif;

font-weight:bold;

color:#C0CB77;

font-size:20px;

line-height: 1.5em;

padding-left: 10px;

overflow:hidden;

}

#site_content {

width: 980px;

overflow: hidden;

padding: 0;

background-color: #565747;

}

#sidebar_container {

float: right;

width: 430px;

padding: 0;

}

#content {

width: 980px;

padding: 0 20px 0 50px;

background: #565747;

ffloat: left;

}

#content ul {

margin: 0 20px 5px 0;

}

#content ul li {

list-style-type: none;

background: transparent url(../images/bullet.png) no-repeat left center;

margin: 0;

padding: 2px 0 2px 28px;

line-height: 1.5em;

}

footer {

height: 115px;

width: 980px;

font: 10px 'New Cycle', arial, sans-serif;

background: #6F7640;

}

footer p {

padding: 10px 0 5px 20px;

line-height: 1.5em;

}

footer a, footer a:hover {

color: #E6EEB0;

text-decoration: none;

}

footer a:hover {

color: #E6EEB0;

text-decoration: underline;

}

/* form styling */

.form_settings {

margin: 0;

}

.form_settings p {

padding: 10px 10px 10px 10px;

}

.form_settings span {

padding: 5px 0;

float: left;

width: 170px;

text-align: left;

}

.form_settings input, .form_settings textarea {

padding: 8px;

width: 252px;

font: 100% arial, sans-serif;

border: 0;

border-bottom: 1px solid #C0CB77;

background: transparent;

color: #E6EEB0;

}

.form_settings .submit {

font: 140% 'News Cycle', arial, sans-serif;

border: 0;

width: 100px;

margin: 0 0 0 162px;

height: 30px;

padding: 0 0 6px 0;

cursor: pointer;

-webkit-border-radius: 6px 6px 6px 6px;

-moz-border-radius: 6px 6px 6px 6px;

border-radius: 6px 6px 6px 6px;

background: #6F7640;

color: #FFF;

line-height: 15px;

}

.form_settings textarea, .form_settings select {

font: 100% arial, sans-serif;

border: 1px solid #C0CB77;

-webkit-border-radius: 6px 6px 6px 6px;

-moz-border-radius: 6px 6px 6px 6px;

border-radius: 6px 6px 6px 6px;

width: 250px;

overflow: auto;

}

.form_settings select {

width: 304px;

}

.form_settings .checkbox {

margin: 4px 0;

padding: 0;

width: 14px;

border: 0;

background: none;

}

ul.images {

width: 415px;

height: 415px;

overflow: hidden;

position: relative;

margin: 130px 0 30px 0;

padding: 0;

}

ul.images li {

position: absolute;

list-style: none;

padding: 0 10px 0 10px;

}

ul.images li.show {

z-index:500;

}

ul img {

border:none;

}

.centeralign {

text-align: center;

padding: 0;

maegin: 0;

}

.rightalign {

text-align: right;

}

#apDiv2 {

display: none;

}

/**

Stylesheet for SooperFish by www.SooperThemes.com

Author: Jurriaan Roelofs

**/

/* Configuration of menu width */

html body ul.sf-menu ul,html body ul.sf-menu ul li {

width: 1165px;

}

html body ul.sf-menu ul ul {

margin: 0 0 0 155px;

}

/* Framework for proper showing/hiding/positioning */

ul.sf-menu,ul.sf-menu * {

margin: 0;

padding: 0;

}

ul.sf-menu {

display: block;

position: relative;

}

ul.sf-menu li {

display: block;

list-style: none;

float: left;

position: relative;

}

ul.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

ul.sf-menu a {

display: block;

position: relative;

}

ul.sf-menu ul {

position: absolute;

width: 170px

font: 16px;

top: auto;

left: -999999px;

}

ul.sf-menu ul a {

zoom: 1; /* IE6/7 fix */

}

ul.sf-menu ul li {

float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */

width: 130px;

}

ul.sf-menu ul ul {

top: 0;

margin: 0 0 0 115px;

}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,

ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,

ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,

ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {

left: auto;

}

ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,

ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,

ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,

ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {

left: -999999px;

}

/* autoArrows CSS */

span.sf-arrow {

width: 7px;

height: 7px;

position: absolute;

top: 20px;

right: 5px;

display: block;

background: url(../images/arrows-white.png) no-repeat 0 0;

overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */

font-size: 1px;

}

ul ul span.sf-arrow {

right: 5px;

top: 20px;

background-position: 0 100%;

}

/* Theming the menu */

ul#nav {

margin-top: 158px;

float: left;

width: 980px;

height: 45px;

background: #6F7640;

}

ul#nav ul {

background: #6F7640;

margin-top: 1px;

padding-bottom: 15px;

}

ul#nav li a {

padding: 8px 18px 8px 18px;

font: 90% impact, arial, sans-serif;

text-decoration: none;

color: #FFF;

}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {

color: #C0CB77;

}

ul#nav ul li a {

color: #FFF;

width: 200px;

}

ul#nav ul li a:hover {

color: #09BCE8;

margin-right: 2px;

}

@FONT-face {

font-family: Droid Sans;

src: url('../fonts/DroidSans-webfont.eot');

src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');

}

@FONT-face {

font-family: Jenna Sue;

src: url('../fonts/JennaSue-webfont.eot');

src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');

}

@FONT-face {

font-family: News Cycle;

src: url('../fonts/NewsCycle-Regular.eot');

src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');

}

html {

height: 100%;}

* {

margin: 0;

padding: 0;

}

/* tell the browser to render HTML 5 elements as block */

article, aside, figure, footer, header, hgroup, nav, section {

display:block;

}

body {

font: normal 18px arial, sans-serif;

background: #C0CB77;

color: #E6EEB0;

}

p {

padding: 10px 15px 10px 15px;

line-height: 1.5em;

}

.parrotimg {

float: left;

margin: 0 10px 10px 0;

}

.parrotimg img {

width: 195px;

height: 156px;

display: block; /* Ensures the image is treated as a block element */

}

span {

color: lightblue;

}

h1 {

font: normal 400% 'Jenna Sue', arial, sans-serif;

color: lightcyan;

margin: 0;

padding: 5px 0 5px 20px;

}

h2 {

font: normal 250% 'Jenna Sue', arial, sans-serif;

color: lightcyan;

padding: 10px 0 10px 15px;

}

h3 {

font: normal 150% 'trebuchet ms', arial, sans-serif;

padding: 10px 0 15px 15px;

}

h4 {

margin: 0;

padding: 5px 0 5px 0;

font: normal 110% arial, sans-serif;

color: lightblue;

}

h5, h6 {

font: italic 95% arial, sans-serif;

color: lightcoral;

padding-bottom: 15px;

}

h6 {

color: #362C20;

}

a, a:hover {

outline: none;

text-decoration: underline;

color: lightcoral;

}

a:hover {

text-decoration: none;

color: lightcoral;

}

ul {

margin-left: 30px;

padding-left: 10px;

}

ul li {

list-style-type: circle;

line-height: 1.5em;

padding-bottom: 10px;

}

ol {

margin: 5px 10px 5px 40px;

padding: 5px 10px 5px 5px;

}

ol li {

margin: 5px 0 0 10px 100px;

padding: 5px 20px 5px 5px;

}

#main, header, #logo, nav, #site_content, footer {

margin-left: auto;

margin-right: auto;

width: 980px;

}

header {

background: url("../Images/aebanner0624.gif") no-repeat top center;

width: 980px;

height: 158px;

}

.container_24 {

margin: 0 auto;

width: 980px;

background: #565747;

}

.grid_5 {

display:inline;

float: left;

width: 230px;

}

.container_24 .prefix_1 {

padding-left: 75px;

padding-right: 0;

}

.text-1 {

overflow: hidden;

width: 220px;

margin-top: 10px;

padding-top: 10px;

padding-bottom: 10px;

font-weight: bold;

color:#C0CB77;

font-size: 16px;

text-align: center;

border: 1px #C0CB77 solid;

}

.text-1 span {

font-family: 'PT Sans Narrow', sans-serif;

font-weight: normal;

color: #000;

font-size: 21px;

line-height: 2em;

display: inline-block;

float: left;

margin-right: 10px;

min-height: 40px;

}

.text-1 strong {

font-family: 'Holtwood One SC', serif;

font-weight:bold;

color:#C0CB77;

font-size:20px;

line-height: 1.5em;

padding-left: 10px;

overflow:hidden;

}

#site_content {

width: 980px;

overflow: hidden;

padding: 0;

background-color: #565747;

}

#sidebar_container {

float: right;

width: 430px;

padding: 0;

}

#content {

width: 980px;

padding: 0 20px 0 50px;

background: #565747;

ffloat: left;

}

#content ul {

margin: 0 20px 5px 0;

}

#content ul li {

list-style-type: none;

background: transparent url(../images/bullet.png) no-repeat left center;

margin: 0;

padding: 2px 0 2px 28px;

line-height: 1.5em;

}

footer {

height: 115px;

width: 980px;

font: 10px 'New Cycle', arial, sans-serif;

background: #6F7640;

}

footer p {

padding: 10px 0 5px 20px;

line-height: 1.5em;

}

footer a, footer a:hover {

color: #E6EEB0;

text-decoration: none;

}

footer a:hover {

color: #E6EEB0;

text-decoration: underline;

}

/* form styling */

.form_settings {

margin: 0;

}

.form_settings p {

padding: 10px 10px 10px 10px;

}

.form_settings span {

padding: 5px 0;

float: left;

width: 170px;

text-align: left;

}

.form_settings input, .form_settings textarea {

padding: 8px;

width: 252px;

font: 100% arial, sans-serif;

border: 0;

border-bottom: 1px solid #C0CB77;

background: transparent;

color: #E6EEB0;

}

.form_settings .submit {

font: 140% 'News Cycle', arial, sans-serif;

border: 0;

width: 100px;

margin: 0 0 0 162px;

height: 30px;

padding: 0 0 6px 0;

cursor: pointer;

-webkit-border-radius: 6px 6px 6px 6px;

-moz-border-radius: 6px 6px 6px 6px;

border-radius: 6px 6px 6px 6px;

background: #6F7640;

color: #FFF;

line-height: 15px;

}

.form_settings textarea, .form_settings select {

font: 100% arial, sans-serif;

border: 1px solid #C0CB77;

-webkit-border-radius: 6px 6px 6px 6px;

-moz-border-radius: 6px 6px 6px 6px;

border-radius: 6px 6px 6px 6px;

width: 250px;

overflow: auto;

}

.form_settings select {

width: 304px;

}

.form_settings .checkbox {

margin: 4px 0;

padding: 0;

width: 14px;

border: 0;

background: none;

}

ul.images {

width: 415px;

height: 415px;

overflow: hidden;

position: relative;

margin: 130px 0 30px 0;

padding: 0;

}

ul.images li {

position: absolute;

list-style: none;

padding: 0 10px 0 10px;

}

ul.images li.show {

z-index:500;

}

ul img {

border:none;

}

.centeralign {

text-align: center;

padding: 0;

maegin: 0;

}

.rightalign {

text-align: right;

}

#apDiv2 {

display: none;

}

/**

Stylesheet for SooperFish by www.SooperThemes.com

Author: Jurriaan Roelofs

**/

/* Configuration of menu width */

html body ul.sf-menu ul,html body ul.sf-menu ul li {

width: 1165px;

}

html body ul.sf-menu ul ul {

margin: 0 0 0 155px;

}

/* Framework for proper showing/hiding/positioning */

ul.sf-menu,ul.sf-menu * {

margin: 0;

padding: 0;

}

ul.sf-menu {

display: block;

position: relative;

}

ul.sf-menu li {

display: block;

list-style: none;

float: left;

position: relative;

}

ul.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

ul.sf-menu a {

display: block;

position: relative;

}

ul.sf-menu ul {

position: absolute;

width: 170px

font: 16px;

top: auto;

left: -999999px;

}

ul.sf-menu ul a {

zoom: 1; /* IE6/7 fix */

}

ul.sf-menu ul li {

float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */

width: 130px;

}

ul.sf-menu ul ul {

top: 0;

margin: 0 0 0 115px;

}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,

ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,

ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,

ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {

left: auto;

}

ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,

ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,

ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,

ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {

left: -999999px;

}

/* autoArrows CSS */

span.sf-arrow {

width: 7px;

height: 7px;

position: absolute;

top: 20px;

right: 5px;

display: block;

background: url(../images/arrows-white.png) no-repeat 0 0;

overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */

font-size: 1px;

}

ul ul span.sf-arrow {

right: 5px;

top: 20px;

background-position: 0 100%;

}

/* Theming the menu */

ul#nav {

margin-top: 158px;

float: left;

width: 980px;

height: 45px;

background: #6F7640;

}

ul#nav ul {

background: #6F7640;

margin-top: 1px;

padding-bottom: 15px;

}

ul#nav li a {

padding: 8px 18px 8px 18px;

font: 90% impact, arial, sans-serif;

text-decoration: none;

color: #FFF;

}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {

color: #C0CB77;

}

ul#nav ul li a {

color: #FFF;

width: 200px;

}

ul#nav ul li a:hover {

color: #09BCE8;

margin-right: 2px;

}

Report · Dec 23, 2024

This is what you have

<div class="parrotimg">
  <img src="Images/red_parrot_on_computer_lg_clr_6287.gif" alt="Dynamite Specialty Productd for Birds">
  <p>My story begins with me working in various different jobs and in Sept 1984, .............</p>

and this is what I suggested

<div class="parrotimg">
  <img src="Images/red_parrot_on_computer_lg_clr_6287.gif" alt="Dynamite Specialty Productd for Birds">
</div>
<p>My story begins with me working in various different jobs and in Sept 1984, .............</p>

Wappler, the only real Dreamweaver alternative.

Report · Dec 22, 2024

Do you want the text to sit to the right and wrap under the image or do you want the text to sit to the right of the image regardless of the height the text makes?

If you want the text to wrap around the image then float the image as suggested by Ben. If you don't want the text to wrap around the image then use display: flex; for the parrotimg css div rather than float: left;

Report · Dec 22, 2024

text to the right of the image and wrap around

Report · Dec 22, 2024

What you're attempting to do will NOT perform well on ALL mobile, tablet & desktop devices. It's not a responsive layout approach for the best user experience.

However, this Bootstrap 5 layout will work by breaking to vertically-stacked-content on small devices.

Desktop

Mobile

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Wrapping Around Image</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.content img {
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
<div class="container py-5">
<div class="row">
<div class="col-md-8">
<div class="content">
<img src="https://dummyimage.com/600x400/0011ff/ffffff.jpg&text=placeholder+image"
alt="Placeholder Image" class="img-fluid float-md-end me-md-3 mb-3">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, nihil dicta ex facere maiores delectus laudantium aliquam error, quam autem in laboriosam omnis perferendis illo, eius unde hic officia dolor.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, nihil dicta ex facere maiores delectus laudantium aliquam error, quam autem in laboriosam omnis perferendis illo, eius unde hic officia dolor.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator