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:
Some minor change I can make to my markup or CSS to fix this?
Thank you!
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>
Some minor change I can make to my markup or CSS to fix this?
Thank you!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
More work than its worth I think, as it is now it looks fine and gives a 3D impression
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
ASKER
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&
Cd&
ASKER
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.