SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

    Attached Images Attached Images
    ****************
    The Webmistress

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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 ?

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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

  5. #5
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ****************
    The Webmistress

  6. #6
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all4nerds. Nearly there now.
    Only problem on mine was the first 2 headings. (h1 & h2) sit on the same line.
    ****************
    The Webmistress

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  8. #8
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How odd? Seems wierd that my definition lists work instead then! eek.
    ****************
    The Webmistress

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Probably something else going on but if its working for you then that's fine

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Jun 20, 2006 at 10:32.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •