SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    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


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
  •