Link to home
Start Free TrialLog in
Avatar of Brad Bansner
Brad Bansner

asked on

Element is not changing width based on image floating to right

This is my test page:
http://bbdesign.com/herbein.com/who-we-are.htm

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:
div.bio-divider{width:90%;
height:1px;
margin:0 auto;
padding:0;
border-top:1px solid #4f4949;
border-bottom:1px solid #4f4949;
opacity:0.7;}

Here is the CSS for the image:
img#hwm-team-1{float:right;
z-index:999;
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>

				<h4>PRESIDENT, WEALTH STRATEGIST<br />
					PERSONAL FINANCIAL SPECIALIST</h4>

				<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>

			<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>
		</div>
	</div>
</div>

Open in new window


Some minor change I can make to my markup or CSS to fix this?
Thank you!
SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Brad Bansner
Brad Bansner

ASKER

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).

Thanks.
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
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.

Thanks!
1.jpg
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.

Cd&