Element is not changing width based on image floating to right

Posted on 2014-08-24
Medium Priority
Last Modified: 2014-08-25
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!
Question by:bbdesign
  • 3
  • 2
  • 2
LVL 58

Assisted Solution

Gary earned 1000 total points
ID: 40281692
Swap your divider div and image round

Add position: relative; to div.bioblock {...}

Author Comment

ID: 40281899
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).

LVL 58

Expert Comment

ID: 40281945
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 53

Accepted Solution

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


Author Comment

ID: 40282839
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.


Author Comment

ID: 40284017
Its a percentage issue with CSS in Safari. I don't think there is any way around it.
LVL 53

Expert Comment

ID: 40284080
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.


Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month12 days, 23 hours left to enroll

578 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