#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    6
    Rep Power
    0

    why does this css example wrap?


    <html>
    <head>
    <style type="text/css">
    .block{
    background-color:red;
    width:200px;
    height:200px;

    }

    .header{
    background-color:gray;
    width:10px;
    padding:3px 3px 3px 3px;
    }

    .content{
    background-color:blue;
    width:100%;
    height:100%;
    padding:10px 10px 10px 10px;
    }
    </style>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <!-- outer block -->
    <div class="block">
    <div class="header">header</div>
    <div class="content">

    <!-- inner block -->
    <div class="block">
    <div class="header">sub header</div>
    <div class="content">sub content</div>
    </div>

    </div>
    </div>
    </body>
    </html>


    if you look at it, you'll see that the header in the "inner block" wraps (what i don't want), while the one in the "outer block" doesn't. why is this, and how can i fix?
  2. #2
  3. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    I'm far from a CSS expert, but it looks to me like the problem is that you've defined the width of the header space to 10px. When I changed the "Outer Block" header content to something longer than the single word 'header' it wrapped too.


    wdn2k
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    6
    Rep Power
    0
    i did that on purpose, so that any text would fit there, and the padding would provide a border.

    why would it wrap in one, and not the other? they're the same class
  6. #4
  7. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    Perhaps I wasn't clear in my reply. BOTH of them wrapped when they had more than one word in them. In fact, if when I seperated the word header into individual letters 'h e a d e r' it displayed vertically! I'm guessing this is because 10px isn't enough room for even two characters to sit side by side without wrapping. The only reason that the word 'header' doesn't wrap is because there are no spaces in it, so the browser doesn't know where to break it. Try putting 'headerheaderheaderheader' into the first one, it won't wrap because there aren't any spaces.


    wdn2k
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    6
    Rep Power
    0
    oooooh, ic ic. that makes sense then.

    what i was trying to do was make a box that would just surround my text, guess this isn't the way =)
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    I've used that trick too, assign stupidly small dimensions, and allow the browser to stretch. Key is not to use breaking elements (spaces, hyphens, etc).

    Brush up on your html entities. Specifically, use the &amp;nbsp; in place of spaces (Non Braking SPace), the browser won't break them.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    6
    Rep Power
    0
    awesome, thanks for that tip

IMN logo majestic logo threadwatch logo seochat tools logo