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
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=""></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

    padding-left: 330px;

    div.biotext {...}

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

    Accepted Solution

    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


    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now