Element is not changing width based on image floating to right

Posted on 2014-08-24
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:

Here is the CSS for the dividers:{width:90%;
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=""></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
    LVL 58

    Assisted Solution

    Swap your divider div and image round

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

    Author Comment

    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

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

    Accepted Solution

    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

    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

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

    Expert Comment

    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.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

    759 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

    11 Experts available now in Live!

    Get 1:1 Help Now