SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS floating problems again

    Hi everyone,
    I would like to have my page devided into 3 columns, each column width equals 33% of the page width.
    Main HTML code goes as follows:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>test.html</title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="test.css" />
      </head>  
      <body>
        <div id="column1">
          <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
       </div>
      <div id="column2">
        <p>2222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
      </div>
      <div id="column3">
        <p>33333333333333333333333333333333333333333333333333333333333333333333333333333333</p>
      </div>
      </body>
    </html>
    Stile code is:
    Code:
    #column1 {float:left; width:33%; border: 1px solid blue}
    #column2 {float:left; width:33%; border: 1px solid red; padding:12px 1px 1px 1px;}
    #column3 {float:left; width:33%; border: 1px solid green}
    Since each line is broader then 33% of the page's width, I expected it to be continued at a 2nd line
    in its' paragraph and not to penetrate into its' neighbor's paragraph's domain.
    Attached is a screeshot of the page outcome of the above code.
    Why does a line, when it reachs the 33% width of the page, doesn't continue in a new line?
    What is missing in the above code to make lines exceeding 335 of page's width to continue in a
    new line?
    Thanks
    Attached Images Attached Images

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

    I don't know many words as long as you have shown above!

    Browsers won't automatically break words at the boundaries of the parent unless you specifically tell them to.

    Code:
    #column1,
    #column2,
    #column3{word-wrap:break-word}
    If you had used normal words with spaces you would have seen that the content would wrap as required. However it is always useful to add word-wrap:break-word to small percentage width columns to avoid long words sticking out.

    Be careful with percentages and px border and padding as that simply won't add up to the available space. For IE8+ you could use box-sizing so that the padding and borders don't add to the width. Or you could use display table-cell instead of float (IE8+). Older browsers would need float and then use an inner element to hold the borders and padding.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul. I didn't even recognize I was writing one word
    Deviding it into few words solved my problem
    Thanks again..


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
  •