Margins, Border and Float Problem

[Phire_SK]

Hello,I'm having an issue that I can't really solve (for Firefox). Basically I have a image that floats left. To the right of it is a headline and some paragraph text. The problem I have is the border-bottom on the headline spans all the way into the floating image. It doesn't respect the margin/padding of the floated image.Here is an preview of it: Any clues on how to fix this? My css is as follows:Thumbnail Image:float: left;padding: 0 5px 25px 0;margin: 0 20px 20px 0;border-bottom: 1px solid #afa9a6;border-right: 1px solid #afa9a6;background:url({image_directory}/webinar_imageborder.png) no-repeat bottom center;Headlinefont-size: 22px;margin-bottom: 9px;padding-bottom: 9px;width: auto;color: #853347;border-bottom: 1px dashed #853347;Paragraphdisplay: block;margin: 1em 0;font-size: 12px;line-height: 18px;color: #000000;

[Ingolme]

Just give the headline a left margin that's equal to the width of the image.

[jeffman]

<!-- Float this left --> <div>   <!-- image --> </div><!-- Float this left --> <div>   <div>	  <!-- headline -->   </div>   <div>	  <!-- paragraph -->	</div></div>

[Phire_SK]

Just give the headline a left margin that's equal to the width of the image.

Well, I need the text to be flush with the right side if the image isn't there. The example image shows how it looks with and without the image. If I put the margin on the text, then it will always be pushed over.

[Phire_SK]

<!-- Float this left --> <div>   <!-- image --> </div><!-- Float this left --> <div>   <div>	  <!-- headline -->   </div>   <div>	  <!-- paragraph -->	</div></div>

Thanks for the suggestion. I'm wondering, however, why there is an issue in Firefox but not in Internet Explorer?Here is a shot from IE6: You'll notice in this preview that it has the proper margin.Anyone know why this happens?

[rzea]

Answer for your post:Although it works, I would suggest using proper HTML semantics instead of several DIVs as DD proposed, it will make your page more SEO friendly and reduce the amount of code for that area:HTML:

<div class="headline">  <img src="..." />  <h1>Headline</h1>  <p>Paragraph</p></div>

CSS:

div.headline,div.headline img,div.headline h1,div.headline p  {  float:left;}div.headline img {  margin:0 20px;  padding: 0 5px 25px 0;  border-bottom: 1px solid #afa9a6;  border-right: 1px solid #afa9a6; }div.headline h1 {  font-size: 22px; /*I suggest you use ems*/  color: #853347;  margin-bottom: 9px;  padding-bottom: 9px;   border-bottom: 1px dashed #853347;}div.headline p {  margin: 1em 0;  font-size: 12px;/*I suggest you use ems here as well*/  line-height: 18px;  color: #000; }

To answer your last question, I think is probably the float:left; property from your image, since the other elements are not being floated they have a hard time 'stacking' properly to the left, that's why I floated them all to the left in my example. IE shows is 'right' because it tries to understand what the user wants, but Firefox is showing it properly because of the issues with the elements that are not floated.

[jeffman]

Ricardo's version has the right idea, but it needs a few tweaks. As written, the paragraph floats to the left of the headline, not beneath it.So I removed the float declaration from the paragraph. That worked.Until I added a few dozen words to the paragraph. (Which OP might do.)Or made the image shorter. (Just to test the underlying principle.)Hmmmm

[jlhaslip]

like this?

[rzea]

DD is right, my code needs a little tweaking.So, I tweaked it... THEM (CSS and HTML) [ I took the liberty to use jlhaslip's image ]:HTML:

<div class="img"><img src="http://jlhaslip.com/samples/image_display/image.gif" /></div><div class="headline">  <h1>Headline</h1>  <p>Paragraph</p></div>

CSS:

div.headline {	width:400px;	float:left;}div.img {	float:left;	margin:0 20px;	padding: 0 5px 25px 0;	border-bottom: 1px solid #afa9a6;	border-right: 1px solid #afa9a6;}div.headline h1 {	font-size: 22px; /*I suggest you use ems*/	color: #853347;	margin-bottom: 9px;	padding-bottom: 9px;	border-bottom: 1px dashed #853347;}div.headline p {	margin: 1em 0;	font-size: 12px;/*I suggest you use ems here as well*/	line-height: 18px;	color: #000;}

What I did was that I took the image out of the container (div.headline) and placed it in its own DIV (div.img). The reason for this is so the text/paragraph flows properly indented without wrapping under the image, this happens because the div.img is floated thus it creates an 'invisible' column; this also prevents the use of height in the div.img to be able to create that invisible column I'm mentioning.jlhaslip's example is another working approach.

[Phire_SK]

This worked great for fixing the floating issue but how can I use this solution and still have my text span the page? Right now we have a set 400px width, but can we have it so the width fills the entire width available?Thanks for all the help so far from everyone.Here is how it looks now, notice the width issue: (P.S. it is cropped, so the actual space on the right side is even more)

[Phire_SK]

If I were to outline the requirements they would be: 1) Proper float with border-bottom on headline working2) Span the entire width of the page/text area3) Ability to remove image and have the text display across the whole page as though no image was supposed to be thereSo 1 and 3 are good to go, I just have an issue with #2.

[Phire_SK]

Something I don't really understand with Firefox is why the text would be interact with the float properly but the border on the text doesn't? What I'm thinking is that in Firefox the headline leaves a placeholder that is the whole width and it never moves. CSS stays within this placeholder but any HTML can move around in the placeholder depending on other elements in the page. So, when I manipulate CSS attributes like border or background, it affects this placeholder which is static and stuck...Is this what Firefox does? Interesting but strange behavior in my opinion.

[rzea]

Right now we have a set 400px width, but can we have it so the width fills the entire width available?...2) Span the entire width of the page/text area

Change 400px to 100%?

[Phire_SK]

Change 400px to 100%?

When I try 100% it doesn't float anymore. The image ends up being above the text...

[rzea]

You're right... mmmm....And I've been working with the code but there are issues everywhere:If you remove the float from the div.headline then the text will wrap around the picture. If you reduce the % in the with from 100% to 70% for example, the div.headline works in FF, Safari, IE7 and Google Chrome but not in IE6 (the content headline wraps).So I think the best solution here without having to incur in using too many DIVs is try using different percentages to see what fits your page, and then make a special class for IE6 only.I haven't seen the code but probably jlhaslip's example could be the proper solution.If you keep having issues with the bottom dashed line, remember you can always use <hr /> and style it accordingly. Weird how the dashed line is not 'pushed' and remains under the image.Let us know then.

[Phire_SK]

You're right... mmmm....And I've been working with the code but there are issues everywhere:If you remove the float from the div.headline then the text will wrap around the picture. If you reduce the % in the with from 100% to 70% for example, the div.headline works in FF, Safari, IE7 and Google Chrome but not in IE6 (the content headline wraps).So I think the best solution here without having to incur in using too many DIVs is try using different percentages to see what fits your page, and then make a special class for IE6 only.I haven't seen the code but probably jlhaslip's example could be the proper solution.If you keep having issues with the bottom dashed line, remember you can always use <hr /> and style it accordingly. Weird how the dashed line is not 'pushed' and remains under the image.Let us know then.

Yeah seems like such a simple thing but it just won't work...I will try the hr method, I think that will save me a lot of time If it works out I'll post a reply. Maybe some poor soul who is trying this same thing will find this thread useful.

[Phire_SK]

Alright I just went the HR route, it works great now.<hr style="border:none; border-top: 1px dashed #527d97; background: #FFFFFF; color: #FFFFFF; height: 8px; " />I set the height to make a fake padding-bottom so that it works better in browsers. The background and color are so that it doesn't show up for all browsers (white is my background color of the page).Thanks everyone for the help. I guess there is no way to make this work with the DIV tag but this is a nice workaround.Thanks again

[rzea]

Phire, did you consider jlhaslip's option?Please style your <hr /> via your CSS file, forget the inline stuff.Show us one last image of how it's looking... or if you have a link, much better.Glad we could help.PS. The more I think about it the more I think that your situation is somehow related to the "two columns with the same height" solution that's out there. Don't know if this would work for you or not, but why don't you check out these links: http://pmob.co.uk/pob/equal-columns.htmhttp://www.killersites.com/blog/2006/matching-div-heigths/

[Phire_SK]

I tried jlhaslip's but the problem with that method is when removing the image the right side doesn't take the whole width. I needed to have it work in both scenarios (with and without an image) without having to have to different tags.Here is the preview of the version in my last post that worked:Those references you gave are good but don't directly address this issue. I'm going to reference them for other projects though .Thanks again for your help. I put the hr CSS code inline just to make it easy to see but for sure it will be in the style sheet.