SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    box div does not expand because of floated image

    There is a gray box containing a div which contains an image. The div that contains the image floats left so that the text flows around it. The problem is that the outer div does not expand to contain the div containing the image because the div containing the image is floated left.

    Fixable? TIA.

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
    <!--
    #main {
    margin: 0 auto 0 auto;
    width: 40%;
    }
    .box {
    background: #e0e0e0;
    border: 1px solid black;
    padding: 2%;
    }
    .t100 {
    background: #fff;
    border: 1px solid black;
    float: left;
    height: 100px;
    margin-right: 2%;
    text-align: center;
    width: 100px;
    }
    -->
    </style>
    </head>

    <body>
    <div id="main">
    <div class="box">
    <div class="t100">
    <img src="x.jpg" alt="image alt text" />
    </div>
    Blah blah blah, words words words.
    </div>
    </div>
    </body>
    </html>

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

    A float is removed from the flow and will extend out of the container that holds it if it is bigger than the container. This is by design.

    The property clear was designed in order to use in situations like this and you simply need to insert a clear statement after your text. This will force the container to encompass your float.
    Code:
    Blah blah blah, words words words.
    <div style="clear:both" /></div>
    </div>
    Hope this helps.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your quick response. I tried something similar to what you suggested, but I guess I didn't see that it was the correct answer because I have two boxes, side by side. Do you have any idea how to disconnect the right-side box from the left-side one? Both boxes should just be as tall as they need to be based on their content.

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
    <!--
    #main {
    margin: 0 auto 0 auto;
    width: 40%;
    }
    .box {
    background: #e0e0e0;
    border: 1px solid black;
    padding: 2%;
    }
    .t100 {
    background: #fff;
    border: 1px solid black;
    float: left;
    height: 100px;
    margin-right: 2%;
    text-align: center;
    width: 100px;
    }
    #left {
    float: left;
    margin: 0;
    width: 50%;
    }
    #right {
    margin: 0 0 1% 51%;
    }
    .clr {
    clear: both;
    }
    -->
    </style>
    </head>

    <body>
    <div id="main">
    <div id="left">
    <div class="box">
    <div class="t100">
    <img src="x.jpg" alt="image alt text" />
    </div>
    Blah blah blah, words words words, blah blah blah, words words words, blah blah blah, words words words.
    <div class="clr"></div>
    </div>
    </div>

    <div id="right">
    <div class="box">
    <div class="t100">
    <img src="y.jpg" alt="image alt text" />
    </div>
    This is the stuff on the right.
    <div class="clr"></div>
    </div>
    </div>
    </div>
    </body>
    </html>

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

    I'm not quite sure if this is what you mean but ie likes a width on its floats or on containers that hold floats.
    Code:
    #right {
    width:48%;
    margin: 0 0 1% 51%;
    }
    This will separate the floats.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but what I mean is that the right-side box's height is much greater than its contents require. It should be the shorter of the two boxes, because it contains less content.

    But because of the clear:both, the right-side box seems to be basing its height on the height of the left-side box.

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

    I think if you try the code out it also achieves that effect.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, of course I tested the code before I posted. In Opera, at least, the right-side box is wrongly taller than the left-side box.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Well, of course I tested the code before I posted. In Opera, at least, the right-side box is wrongly taller than the left-side box.
    Sorry You'd be surprised how many people don't try it out.

    Anyway it worked in moz but all Opera requires a couple of position:relatives as follows.


    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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
    <!--
    #main {
    margin: 0 auto 0 auto;
    width: 40%;
    }
    .box {
    background: #e0e0e0;
    border: 1px solid black;
    padding: 2%;
    position:relative;
    }
    .t100 {
    background: #fff;
    border: 1px solid black;
    float: left;
    height: 100px;
    margin-right: 2%;
    text-align: center;
    width: 100px;
    position:relative;
    }
    #left {
    float: left;
    margin: 0;
    width: 50%;
    position:relative;
    }
    #right {
    width:48%;
    margin: 0 0 1% 51%;
    position:relative;
    }
    .clr {
    clear: both;
    }
    -->
    </style>
    </head>
    <body>
    <div id="main">
    <div id="left">
    <div class="box">
    <div class="t100">
    <img src="x.jpg" alt="image alt text" />
    </div>
    Blah blah blah, words words words, blah blah blah, words words words, blah blah blah, words words words.
    <div class="clr"></div>
    </div>
    </div>
    <div id="right">
    <div class="box">
    <div class="t100">
    <img src="y.jpg" alt="image alt text" />
    </div>
    This is the stuff on the right.
    <div class="clr"></div>
    </div>
    </div>
    </div>
    </body>
    </html>
    That should work.

    paul

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I cut and pasted the code into test3.html and checked it in Opera 7.23, and the problem still remains. I downloaded Mozilla Firebird to check it there, and I see that the problem is fixed there. I guess I'll keep messing around, trying to get that right-side box to shorten up in Opera.

    Thanks for all the code and effort.

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

    It must be a bug in 7.23 as it works perfectly in opera 7.02?

    As I haven't got 7.23 installed you'll just have to play around with it a bit to see what works. I suggest you simplify it right down and try to get it to work from the ground up.

    However I've changed it so that it works in Opera 6 now (which i do have installed) so maybe this will work for your 7.23 as well.
    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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
    <!--
    #main {
    margin: 0 auto 0 auto;
    width: 40%;
    }
    .box {
    background: #e0e0e0;
    border: 1px solid black;
    padding: 2%;
    position:relative;
    }
    .t100 {
    background: #fff;
    border: 1px solid black;
    float: left;
    height: 100px;
    margin-right: 2%;
    text-align: center;
    width: 100px;
    position:relative;
    }
    #float {
    float: left;
    margin-left:1% ;
    width: 46%;
    position:relative;
    }
    .clr {
    clear: both;
    }
    -->
    </style>
    </head>
    <body>
    <div id="main"> 
      <div id="float"> 
    	<div class="box"> 
    	  <div class="t100"> <img src="x.jpg" alt="image alt text" /> </div>
    	  Blah blah blah, words words words, blah blah blah, words words words, blah 
    	  blah blah, words words words. 
    	  <div class="clr"></div>
    	</div>
      </div>
      <div id="float"> 
    	<div class="box"> 
    	  <div class="t100"> <img src="y.jpg" alt="image alt text" /> </div>
    	  This is the stuff on the right. 
    	  <div class="clr"></div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks great! Thanks very much.


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
  •