Element is not changing width based on image floating to right

This is my test page:

Scroll down to the biography section for WILLIAM A. MORGAN. I want the double divider lines to not go over top the image of the person. I have the image floating to the right, and the text runs around it the way I want. But for some reason the divider lines to not.

The dividers are: div.bio-divider

Here is the CSS for the dividers:
margin:0 auto;
border-top:1px solid #4f4949;
border-bottom:1px solid #4f4949;

Here is the CSS for the image:
margin:-170px 50px 0 0;}

Yes, my dividers are set to 90%. Would a floating image not still make those collapse narrower? My paragraph tags are also set to 90% but they are doing exactly what I want.

Here is the HTML:

<div id="hwm-team" class="contentblock">
	<h1>{ HWM TEAM }</h1>

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

		<div class="bioblock">
			<div class="bio-divider"></div>

			<div class="hwm-team-title">
				<h3>WILLIAM A. MORGAN, <span class="credentials">CPA PFS</span></h3>


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

			<div class="bio-divider"></div>

			<p><span class="boldintro">BILL MORGAN</span> has been involved in the financial service industry for over thirty years. Bill offers a unique skill set that combines strong tax knowledge and wealth management expertise. Prior to founding Herbein Wealth Management, Bill served as Director of Tax Services at Herbein + Company, Inc., a regional accounting firm. Bill is a Certified Public Accountant and Personal Financial Specialist. He focuses on creating comprehensive wealth strategies for his clients in order to guide them through their financial challenges.</p>

			<p>Bill is uniquely positioned to work with high net worth clients. With roots in the CPA profession, Bill has earned the trust of his clients by consistently delivering objective advice and serving as their advocate. Bill values the trust his clients place in him and leverages his tax expertise by combining it with significant investment knowledge to create a roadmap for clients to achieve their financial goals.</p>

Open in new window

Some minor change I can make to my markup or CSS to fix this?
Thank you!
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.

Swap your divider div and image round

Add position: relative; to div.bioblock {...}
Brad BansnerWeb DeveloperAuthor Commented:
I added position:relative to both div.bioblock and the images. That is getting me closer (the image is over the divider lines now). But what I really what is for the divider lines to be the same width as the paragraphs.

I'm not sure I'm following the first thing you said (swap the two elements? there are two divider lines per div.bioblock... not sure what you mean).

With your design you would need to use media queries to change the width of the divider at all the different resolutions
More work than its worth I think, as it is now it looks fine and gives a 3D impression
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

I agree with Gary that it gives a good rendering the way it is, but using empty divs commonly creates maintenance problems.  Using hr tags might be more appropriate and should give you more control using CSS and floating them in the blob elements.


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:
I agree that it looks good visually, but the design agency I am working for is particular, so I am going to try to match it.

Your clue to try <hr> instead of <div> was helpful. I didn't realize they would behave so  differently. I tried that, and now the widths and runarounds look good. The <hr> tags are a little more difficult to style, but the layout behavior is a lot easier to work with.

However, I am noticing one issue with Safari. The left margins are not matching (the right margins are fine). Chrome and Firefox work fine, this only happens in Safari (see screenshot attached). Maybe this is just a browser inconsistency issue with the <hr> element. Any idea why that is happening? If this is a topic more appropriate for a new thread, let me know.

Brad BansnerWeb DeveloperAuthor Commented:
Its a percentage issue with CSS in Safari. I don't think there is any way around it.
Yeah Safari takes a few liberties with the technical specifications where math is concerned.  Virtually all browsers have a few such math quirks based on their re-paint code which is part of the core of the rendering engines.

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.