Log in

View Full Version : image word wrap and horizontal lines


james438
07-17-2010, 07:26 AM
Hi.

How can I put an image that is floated to the left in a div that takes up half the div and put in a horizontal line (this can be <hr> or a div with a border) and text and have the text wrap around the image and have the horizontal line take up 50% of the space between the image and the right side of the div and have the div centered?

Here is what I have so far:


<style type="text/css">
.img{
float:left;
padding: 13px 13px 10px 13px;
</style>
<body><div style="width:50%;border: #000000 solid;float:left;"><img src="/images/a/kimura.jpg" class='ft' style="width:305px;width:305px;float:left; padding: 3px 3px 0px 3px;"></a>yadda yadda yadda yadda <hr style="text-align:center;width:75%;">yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda <div style="border-top: 1px #000000 solid;margin-top:4px;float:left;width:50%;"></div>yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</div></body>
jscheuer1
07-17-2010, 02:02 PM
I'm not sure which division you want centered, try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="width:50%;border: 2px solid #000;margin: 0 auto;"><img src="/images/a/kimura.jpg" alt="not here" class='ft' style="width:305px;height:305px;float:left; margin: 3px 3px 0px 3px; border: 1px solid red;"></a>yadda yadda yadda yadda <hr style="width: 25%; margin: 0 auto;">yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda<div style="clear:left;"></div></div></body>
</html>
james438
07-17-2010, 07:31 PM
Works great in all browsers except Opera. Do you think this is an issue with Opera? If the fault lies with Opera I am content with the code as is and will check things out on Opera's end. The problem is that with Opera the horizontal line overlaps the image.

The div that I want centered is the horizontal line. This can be a division or a horizontal rule.
jscheuer1
07-17-2010, 08:58 PM
Ah, Opera. Not ideal, but I'm thinking you may be able to tweak it from here:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="width:50%;border: 2px solid #000;margin: 0 auto;"><img src="/images/a/kimura.jpg" alt="not here" class='ft' style="width:305px;height:305px;float:left; margin: 3px 3px 0px 3px; border: 1px solid red;"></a>yadda yadda yadda yadda <hr style="width: 25%; margin: 0 12.5% 0 0;float:right;"><div style="clear:right;">yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</div><div style="clear:left;"></div></div></body>
</html>
james438
07-17-2010, 11:42 PM
Maybe not ideal, but certainly a step in the right direction and it can work as a workaround at least. Do you think that the fault lies with Opera here? If so then I am quite happy with how things are.
jscheuer1
07-18-2010, 12:19 AM
Looks good using my first method in Chrome and Safari (already tested good in IE 8 and Firefox), so I guess Opera is the odd man out.

Thing is though, with percentages you are always one way or another at the mercy of the user's screen/window size.

I don't really do much designing. My idea of a really good design though is one where there are various elements of fixed dimensions that can float and/or flow about the page depending upon its size.

Most of what you see though depends upon screen/window size too much and/or has a fixed overall width of about 800px. There are some creative headers that can sort of stretch without appearing to do so on larger screens/windows, while looking just fine on narrower ones.

I'd start with something like that at the top, and have the content be as I stated - able to float and/or wrap beneath the header in various ways and still look good.
james438
07-20-2012, 03:07 AM
I have a small page (http://www.animeviews.com/article.php?ID=234) on my site where I keep track of some Opera browser bugs that I have run across. In Opera 12.50 build 1513 the Horizontal Rule issue was recently fixed. I'm rather excited about this one, because I have been waiting for it for a while now.

Here is a direct link to my demo page (http://www.animeviews.com/test/sample/test12.php) where it now works. This works in the 12.50 1513 build, so it has not been released yet, but should be soon.

I know the last post is just over 2 years old, but this thread seemed like the most appropriate place to post this.
jscheuer1
07-20-2012, 04:54 AM
As far as I can see, those rules aren't centered in any browser.

To center a horizontal rule within its container, specify both of their widths and give the HR a left and right margin of auto.
james438
07-20-2012, 06:39 AM
You're right :(. I updated the page a little and see that the stable version of Firefox and latest build of Opera look the same. They base the widths of the hr on the entire container and the margins on the container, but relative to the image.

In the stable version of Opera the horizontal rule is placed relative to the container and ignores the position of the image. The hr is behind the image.

In ie8 (I do not have access to ie9 or ie10) the width of the hr is based on the width of the container minus the space taken up by the width of the image.
jscheuer1
07-20-2012, 07:13 AM
If I'm following you correctly, this is something that's going to vary by browser. According to standards a floated image takes up no layout space. So if you float an image in the same container where you're also trying to center an HR using the method I outlined, the HR will be centered relative to the container without regard to the image. Older IE did, at least at times, give floated content some layout space, so it's unclear how that would affect things.

All browsers should react well in this situation:

Put the image in a separate div and make another separate div for the text and HR tags. Float both of these left within a container div. Set the width of the image div to that of the image, and the width of the text/HR div can probably be left unset as long as the width of the container is set. Now the method I outlined should work.