[Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2014-08-26
Medium Priority
Last Modified: 2014-08-26
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"?

Question by:bbdesign
LVL 58

Assisted Solution

Gary earned 1000 total points
ID: 40286069
padding-left: 330px;

div.biotext {...}

Will still break on very small screens but so does the rest of your layout...
LVL 53

Accepted Solution

COBOLdinosaur earned 1000 total points
ID: 40286198
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.


Author Comment

ID: 40286220

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month20 days, 13 hours left to enroll

865 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