SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Baltimore, MD
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mixing floats in css and html

    Is there a way to put text with an html floated image into a div defined in css?

    I am constructing a page on the fly and trying to incorporate html that my client builds in simple html and stuff it into a div on my page. The code and css follow. Neither MSIE nor netscape seems to handle the result very well. Because the site is meant to be dynamic, I won't know what images might be included, nor their size. See sample at http://www.j4j.org/web/artcontest/2005/test2.php
    MSIE6 hides the image behind the div and both browsers set the size of the div to that of the text, not the larger height of the image.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Jews for Judaism Writing Contest</title>
    <link href="styles/test.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="pagemain">
    <p><img src="images/artcontestBLKICONPoster.gif" width="145" height="186" align="left"> for students</p>
    <p>in the</p>
    <p>Greater Washington, D.C. Area</p>
    </div>
    </body>
    </html>


    CSS IS
    body
    {
    background-color: #00499A;
    }

    #pagemain {
    float: none;
    border: 1px solid #003399;
    position: relative;
    background-color: #FFFFFF;
    }

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shoshanaz
    Is there a way to put text with an html floated image
    into a div defined in css?

    Because the site is meant to be dynamic, I won't know what images might be included, nor their size.
    CSS can't be used to put various image sizes into an HTML page. Well, I guess technically you could but you're going to get funky results. You need to design your CSS around how big your images will be. The only problem I see with the code below (b/c I'm intermediate with CSS) is you have not declared a float value below, like so:

    Your code:
    Code:
    #pagemain {
    	float: none;
    	border: 1px solid #003399;
    	position: relative;
    	background-color: #FFFFFF;
    Float value declared:
    Code:
    #pagemain {
    	float: left or right, adjust to suit;
    	border: 1px solid #003399;
    	position: relative;
    	background-color: #FFFFFF;
    }
    Without the above declared, you are not telling the browser which way to float the text surrounding it.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Baltimore, MD
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mixing floats in css/html

    That change did make a difference, at least the image doesn't get covered up. I guess I will probably forget about using the html approach and just define a couple of extra styles for handling the images.

    Thanks for the reply

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The image was covered up because you had used position:relative on the parent and ie then likes its children to also be position:relative as well.

    You also need to clear the float to make the parent extend.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Jews for Judaism Writing Contest</title>
    <style type="text/css">
    body
     {
     background-color: #00499A;
     }
     
    #pagemain {
     border: 1px solid #003399;
     position: relative;
     background-color: #FFFFFF;
    }
    #pagemain img {
     float:left;
     position:relative;
     margin:5px;
    }
    #pagemain p {margin:10px 0 0 0;padding:0}
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    </style>
    </head>
    <body>
    <div id="pagemain"> 
      <img src="http://www.j4j.org/web/artcontest/20...ICONPoster.gif" width="145" height="186"> 
      <p> for students</p>
      <p>in the</p>
      <p>Greater Washington, D.C. Area</p>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Baltimore, MD
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it does indeed. Thanks. I have definitely learned a thing or three here.


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
  •