SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    0 Post(s)
    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:
    <!DOCTYPE html>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="test.css" />
        <div id="column1">
      <div id="column2">
      <div id="column3">
    Stile code is:
    #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?
    Attached Images Attached Images


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts