HTML Forum

**derjavina** · 09-04-2007, 02:36 AM

How do I avoid getting a line break when using <p> after a floated img?
I've got an image floated left, then my block of text. IE7 displays fine, as is usually the case, but standards compliant browsers such as FF insert a line break before the text so that it is lower than I want it to be, and therefore not in line with the image. (I've noticed that this line break sometimes gets inserted, but sometimes doesn't, and this can even depend on whether the paragraph element has a border or not, or whether it is inside another div!) Can anyone explain to me what is going on?

Chris

**maxxximus** · 09-04-2007, 09:02 AM

If you apply an inline style to the p element <p style="display:inline"></p> it should render correctly in FF.

**derjavina** · 09:59 AM

Thanks Maxxximus. Unfortunately, display:inline seems to interfere with the max-width property. Typical of CSS! Everything appears to influence everything else in some way.
But I don't get why it's necessary to use display:inline. I tested in another document and it wasn't needed - the text followed after the image without a line break. Is there a CSS rule I should know about that states when a line break is inserted and when it isn't? Using display:inline in this case just causes a different problem (max-width stops working).

Chris

**LadynRed** · 09-04-2007, 03:01 PM

Quote:

Everything appears to influence everything else in some way.

Correct, that's why they're called CASCADING stylesheets.

Quote:

Is there a CSS rule I should know about that states when a line break is inserted and when it isn't?

No.

Min/max width and height are NOT supported by IE6, so you need to be careful of that too.

Let's see the code you're having trouble with. Can't debug something from nothing.

**derjavina** · 09-04-2007, 08:05 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Haywire Media</title>
<link rel="stylesheet" href="main.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
</head>
<body>
<div id="index">
<div id="page">
 <div id="head">
 <img src="images/haywire-media.jpg" alt="" />
 </div><!--head-->
<div id="tier2">
 <div id="main">
 <img class="red_arrow" src="images/red_arrow.gif"alt=""  />
 <p class="content">Welcome to Haywire Media etc etc etc etc etc</p>
 <img class="img_cover" src="images/cover-pic.jpg" alt="" />
 <div style="clear:both;"></div>
</div><!--main-->
</div><!--tier2-->
</div><!--page-->
</div><!--index-->
</body></html>

CSS:

Code:

body{
margin:0;
padding:0;
text-align:center;}
#page{
margin:0 auto;
border:1px solid black;
width:775px;
text-align:center;}
#head{
margin:0;padding:0;}
#tier2{
margin:auto;padding:0;
background:url(images/greenlayer.jpg);background-repeat:no-repeat;}
#main{
text-align:left;
margin:0;
width:521px;
position:relative;top:54px;left:222px;
height:400px;
background:url(images/main_bg.jpg);background-repeat:no-repeat;
padding:24px 15px 10px 15px;}
.content{
display:inline;
width:100px;
border:1px solid orange;
color:blue;}
.img_cover{
float:right;}
.red_arrow{
float:left;}

**LadynRed** · 03:20 PM

I copied your code and put it into a page with 2 images (since we don't have yours).

Zero out your margins on .content, and you can take out the display: inline too.

You should also be assigning width and height values in your <img> tags, why force the browser to calculate it ?

I did notice another problem - your #main div, is NOT being contained inside #page.

**derjavina** · 09-05-2007, 10:33 PM

Thanks very much. Removing the margin has worked and I no longer need to try and get the paragraph inline (which for some reason conflicted with the width property - I have no idea why it does that).
I will add height and width for the images too.

Quote:

Originally Posted by LadynRed

I did notice another problem - your #main div, is NOT being contained inside #page.

I'm not sure what you mean by that. The #main div uses a white background square with a shadowy border for the background, and I've positioned it to overlap the background image in #tier2. Perhaps this isn't the best way to do this, I don't know.

**LadynRed** · 09-06-2007, 04:02 PM

Ok, maybe it looks ok with all your graphics. With the 'wireframe' of the layout and using borders it just appeared as if the #main box was 'escaping' it's container.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!