#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    19
    Rep Power
    0

    stupid little css problem ...


    at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve.

    what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message).

    look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed.

    now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue.

    my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css.

    i'll also post my code:
    Code:
    <div style="border:#ff0000 solid 1px"><!-- full wrapper -->
    
     <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper -->
    
      <div><img alt="image" src="img.bmp"></div>
    
      <div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper -->
    
       <div style="text-align:center">caption</div>
    
      </div><!-- end caption -->
    
      </div><!-- end float -->
    
     <div style="background-color:#0000ff"><!-- message area -->
    
       <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div>
    
     </div><!-- end message -->
    
    </div><!-- end full wrapper -->
    thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on.

    -z
    Attached Images
  2. #2
  3. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,970
    Rep Power
    4035
    A floated element is just that, it floats. That means it doesn't actually take up space in it's parent element and is thus not part of the picture when heights are calculated. The way you can solve this is to add an empty paragraph at the end of the text and have clear: both; as part of it's style.

    Code:
    <div style="border:#ff0000 solid 1px">
     <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px">
      <div><img alt="image" src="img.bmp"></div>
      <div style="background-color:#cccccc; margin-top:1px">
       <div style="text-align:center">caption</div>
      </div>
      </div>
      <div style="background-color:#0000ff">
       <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div>
     </div><!-- end message -->
      <p style="clear: both;"></p>
    </div><!-- end full wrapper -->
    I think something like that should work for you. Might have to play with where the clear is, but that is what you need.
    Recycle your old CD's, don't just trash them



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    19
    Rep Power
    0
    do i have to use a P tag? does the clear attribute work on other elements, like say a DIV? it's just that i don't like the way P tags behave. normally i would use BR's instead of a P's. i will try a DIV.

    thanks, your response has helped me understand floated elements a little better.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    In theory, any element could be used as a clearing agent. In practice, IE, especially, gets flakey on some. My own approach;
    Code:
    p.clearing {
        clear: both;
        height: 0px;
        overflow: hidden;
        margin: 0px;
        }
    
    <p class="clearing">&nbsp;</p>
    The <p> element, because IE accepts it.
    The 0 height and margin because it doesn't add any height to the containing element.
    The overflow: hidden because otherwise the content would take up space.
    The &nbsp; because empty elements can get screwy under some (random to me) conditions.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo