Float image to left of text, with text in a DIV element, but don't allow text to flow under image

Test page:

Scroll down to the bio for CHIARA S. RENNINGER. I have a <div class="biotext"> with a red background, represented here:

<div class="clearfix">
	<img id="hwm-team-2" src="img/ph_renninger.png" alt="" />

	<div class="bioblock">
		<hr class="right" />

		<div class="hwm-team-title">
			<h3>CHIARA S. RENNINGER, <span class="credentials">CFP<sup>®</sup></span></h3>


			<h5><a href="mailto:carenninger@herbeinwealth.com">carenninger@herbeinwealth.com</a><img src="img/lg_divider.png" /><a href="#"><img src="img/lg_linkedin.png" alt="LinkedIn" /></a></h5>

		<hr class="right" />

		<div class="biotext">
			<p><span class="introtext">CHIARA RENNINGER</span> joined our team in 2003 and has been involved in the financial industry since 1998. Chiara earned a bachelor’s degree in Business Management from Bucknell University. Chiara is a <span class="spread">CERTIFIED FINANCIAL PLANNER™</span> professional and is a member of the Financial Planning Association. She is licensed with the state of Pennsylvania to offer Life and Health insurance solutions.</p>

			<p>As a Wealth Strategist, in close contact with the Herbein + Company accountants, Chiara is able to provide her clients with personalized, tax sensitive plans. Not only does Chiara work with clients to align their investments with their overall goals and objectives, but she also helps them with their advanced planning, including charitable planning, wealth protection, and estate planning. Chiara’s specialty is working with women and widows who have unique challenges and therefore, need an advisor who has experience supporting them through difficult financial and emotional times.</p>

Open in new window

Basically, I don't want the text to flow under the image to the left, which it will do depending on your browser size (see attached screenshot). I realize I probably need some kind of "width" set for that element. But I want the content to remain fluid if possible (note what happens if you make your browser window narrow)... So that means a fixed pixel width is out. Is there any way to make the width of div.biotext "wide enough to fill the width of the page but stay to the right of the image"?

Brad BansnerWeb DeveloperAsked:
Who is Participating?
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.

padding-left: 330px;

div.biotext {...}

Will still break on very small screens but so does the rest of your layout...
just set the width with percentage or vw and it will adjust to the screen size. The page looks like it will still have some issues at narrow widths. It is reasonable adaptive, but not really responsive.  You may need to use media queries to increase reliability.


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
Brad BansnerWeb DeveloperAuthor Commented:
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

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.