Floating an image in text with h1's and h2's

**webmistress** · Jun 20, 2006, 07:10

I am trying to float an image in a containter div with <p> text and <h1>, <h2>'s floating and wrapping around the image.

Works a treat in firefor but IE 6 on windows...

nope.

See attached gif for layout example of what I am trying to do.

Here's my HTML

HTML Code:

    <div id="holder">
    
    					
   <div id="image">
   <script type="text/javascript">this creates the image here. fixed size.</script>
   </div>
    					
   <h1>Title</h1>
   <h2>Description:</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
  Aliquam gravida, tellus non varius posuere, eros justo pharetra 
  leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
  Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
  in, turpis..</p>
    
   <h2>Description 2</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   <h2>Offer:</h2>
   <p>SS554</p>
   			 
    </div><!-- end holder wrap -->

My css is currently:

Code:

#holder{
 width:480px;
 background-color:#FFFFCC;
 }
 
 #holder h1,
 #holder h2,
 #holder h3 {
 display:inline;
 float:left;/*This helps float the content in ie*/
 }
 
 
 html > body #holder h1,
 html > body #holder h2,
 html > body #holder h3 {
 float:none;
 }
 
 #image{
 width:255px;
 height:175px;
 float:right;
 padding-bottom:10px;
 margin-top:18px;
 }

Essentially I need the headings to be inline, which work's ok in firefox. However ie makes the h1's all on one line if I leave it at that and does not float the header next to the image like it should do. I tried applying a width to the h1's and this work's but then breaks when it gets to the first paragraph...

I am super stuck. Apart from making the html non semantic and styling the heading's as <p> tags and using css to make they appear as headings I have no idea what to do.. I dont really want to have to use paragraphs for the whole thing as it's not correct.

Thanks, I am so stcuk on this one!

**all4nerds** · Jun 20, 2006, 07:40

Hello

separate the display inlines by class or tag

PS you also need to clear the floats

class

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{padding:0;margin:0;}
	
	#holder{
	padding-top:10px;
	width:480px;
	background:#FFFFCC;
	}
	
	.x{display:inline;}
	#holder h1,#holder h2,#holder h3,#holder p{padding:10px 5px 5px 5px;}
	
	#image{
	width:255px;
	height:175px;
	float:right;
	margin:0 0 5px 5px;
	background:#ff6600;
	}
	</style>
</head>
<body>
<div id="holder">

<div id="image">
<!-- <script type="text/javascript">this creates the image here. fixed size.</script> -->
</div>

<h1 class="x">Title</h1>
<h2 class="x">Description:</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
Aliquam gravida, tellus non varius posuere, eros justo pharetra 
leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
in, turpis..
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
Aliquam gravida, tellus non varius posuere, eros justo pharetra 
leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
in, turpis..
</p>

<h2>Description 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h2>Offer:</h2>
<p>SS554</p>

</div><!-- end holder wrap -->

</body>
</html>

tag

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{padding:0;margin:0;}
	
	#holder{
	padding-top:10px;
	width:480px;
	background:#FFFFCC;
	}
	
	#holder h1,#holder h2{display:inline;}
	#holder h1,#holder h2,#holder h3,#holder p{padding:10px 5px 5px 5px;}
	
	#image{
	width:255px;
	height:175px;
	float:right;
	margin:0 0 5px 5px;
	background:#ff6600;
	}
	</style>
</head>
<body>
<div id="holder">

<div id="image">
<!-- <script type="text/javascript">this creates the image here. fixed size.</script> -->
</div>

<h1>Title</h1>
<h2>Description:</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
Aliquam gravida, tellus non varius posuere, eros justo pharetra 
leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
in, turpis..
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
Aliquam gravida, tellus non varius posuere, eros justo pharetra 
leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
in, turpis..
</p>

<h3>Description 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h3>Offer:</h3>
<p>SS554</p>

</div><!-- end holder wrap -->

</body>
</html>

**Paul O'B** · Jun 20, 2006, 07:45

Hi,

You may need to clarify this a little because it seems to me that if you remove the float from your h1,h2,h3 styles then IE looks exactly like mozilla and other browers.

Code:

 #holder h1,
 #holder h2,
 #holder h3 {
 display:inline;
 }

What am I missing ?

**all4nerds** · Jun 20, 2006, 07:47

Originally Posted by Paul O'B

Hi,

You may need to clarify this a little because it seems to me that if you remove the float from your h1,h2,h3 styles then IE looks exactly like mozilla and other browers.

Code:

 #holder h1,
 #holder h2,
 #holder h3 {
 display:inline;
 }

What am I missing ?

padding and margins

**webmistress** · Jun 20, 2006, 07:58

I managed to get around the problem (luckiliy in this case) by using a definition list. In this case it was actually what I should have been doing. It's odd how it seems to float around with no issues.

I removed the inline from my headings but then it acted like a block and pushed itself down below the floated image... hmmmm. I am on ie win 6.029

**webmistress** · Jun 20, 2006, 08:02

Thanks all4nerds. Nearly there now.

Only problem on mine was the first 2 headings. (h1 & h2) sit on the same line.

**Paul O'B** · Jun 20, 2006, 08:23

by using a definition list. In this case it was actually what I should have been doing. It's odd how it seems to float around with no issues

There is no difference between how a dl will behave (next to floats) to any other block level element (apart from padding and margins).

IE will not wrap elements around floats if the element has "layout" but will avoid the float and not wrap under where possible.

**webmistress** · Jun 20, 2006, 08:25

How odd? Seems wierd that my definition lists work instead then! eek.

**Paul O'B** · Jun 20, 2006, 08:31

Probably something else going on but if its working for you then that's fine

**all4nerds** · Jun 20, 2006, 08:45

Hello

how do you want the H1 and H2

A (use display inline)

Title Description:

B (needs nothing are by default display block)

Title

Description:

like this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{padding:0;margin:0;}
	
	#holder{
	padding-top:10px;
	width:480px;
	background:#FFFFCC;
	}
	
	
	#holder h1{padding:0 5px 0 5px;}
	#holder h2,#holder h3,#holder p{padding:10px 5px 5px 5px;}
	
	#image{
	width:255px;
	height:175px;
	float:right;
	margin:0 0 5px 5px;
	background:#ff6600;
	}
	</style>
</head>
<body>
<div id="holder">

<div id="image">
<!-- <script type="text/javascript">this creates the image here. fixed size.</script> -->
</div>

<h1>Title</h1>
<h2>Description:</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
Aliquam gravida, tellus non varius posuere, eros justo pharetra 
leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
in, turpis..
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce semper risus id nulla. Maecenas sagittis turpis id elit. 
Aliquam gravida, tellus non varius posuere, eros justo pharetra 
leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. 
Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod 
in, turpis..
</p>

<h3>Description 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h3>Offer:</h3>
<p>SS554</p>

</div><!-- end holder wrap -->

</body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: Floating an image in text with h1's and h2's

Thread Tools

Display

Floating an image in text with h1's and h2's

Bookmarks

Bookmarks

Posting Permissions