Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: Floating

  1. #1
    Junior Member rockstarsmasher's Avatar
    Join Date
    May 2011
    Posts
    10
    Member #
    27842
    I have been practicing floating layouts with columns. Why does my text keep overflowing into the next column? Do I need to add another DIV inside the DIV?

    HTML CODE:
    <head>
    <title>Elite Donuts</title>

    <link href="float.css" rel="stylesheet" type="text/css" />
    </head>

    <div id="container">
    <div id="header">
    <p>Header</p>
    </div>
    <div id="primary">
    <p>Primary Sidebar</p>
    </div>
    <div id="content">
    <h1>Main Content</h1>
    <p>the best donuts in tampa!sfdkljsadfssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssss</p>
    </div>
    <div id="secondary">
    <h1>Secondary Sidebar</h1>
    <p>sdafljasflkdslfdsklfjkdsalfjklasdjfsljfldsjflsj fdlsjflskfdjjdsfjdsfljslfjskdfljsadfljslfj</p>
    </div>
    <div id="footer">
    <p>Footer</p>
    </div>
    </div>


    CSS:
    #container {
    width: 960px;
    margin: 0 auto;
    }
    #primary {
    float: left;
    width: 240px;
    }
    #content {
    float: left;
    width: 480px;
    }
    #secondary {
    float: left;
    width: 240px;
    }
    #footer {
    clear: both;
    }

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I see a couple of things wrong ( if you included all the code from the page )

    1. You need to define a DOC TYPE , most browsers don't want to render CSS properly without the doc type defined.

    2. No <HTML> Opening or closing tags

    3. No <body> tags

    3. Define margins ( even if 0 ) on all of your elements.

    4. define padding ( even if 0 ) on all of your elements.

  4. #3
    Junior Member rockstarsmasher's Avatar
    Join Date
    May 2011
    Posts
    10
    Member #
    27842
    Ok. I did that and still the text overflows...

    HTML:
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Elite Donuts</title>

    <link href="float.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="container">
    <div id="header">
    <p>Header</p>
    </div>
    <div id="primary">
    <p>Primary Sidebar</p>
    </div>
    <div id="content">
    <h1>Main Content</h1>
    <p>the best donuts in tampa!sfdkljsadfssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssss</p>
    </div>
    <div id="secondary">
    <h1>Secondary Sidebar</h1>
    <p>sdafljasflkdslfdsklfjkdsalfjklasdjfsljfldsjflsj fdlsjflskfdjjdsfjdsfljslfjskdfljsadfljslfj</p>
    </div>
    <div id="footer">
    <p>Footer</p>
    </div>
    </div>

    </body>
    </html>

    CSS:
    #container {
    width: 960px;
    margin: 0 auto;
    padding:0;
    }
    #primary {
    float: left;
    width: 240px;
    margin:0;
    padding:0;
    }
    #content {
    float: left;
    width: 480px;
    margin:0;
    padding:0;
    }
    #secondary {
    float: left;
    width: 240px;
    margin:0;
    padding:0;
    }
    #footer {
    clear: both;
    }

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    OK....

    I see said the blind man....

    if you don't use continuous rows of letters, it will wrap correctly. I don't think they had that in mind for web design....

    I know many that use the Loren Ipsum content as filler so people are not looking at the word, but it fills the space and this is avoided...

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Try THIS

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
    <title>Elite Donuts</title>
    <style type="text/css">
    #container {
    width: 960px;
    margin: 0 auto;
    padding:0;
    }
    #primary {
    float: left;
    width: 240px;
    margin:0;
    padding:0;
    }
    #content {
    float: left;
    width: 480px;
    margin:0;
    padding:0;
    }
    #secondary {
    float: left;
    width: 240px;
    margin:0;
    padding:0;
    }
    #footer {
    clear: both;
    }



    </style>

    </head>

    <body>

    <div id="container">
    <div id="header">
    <p>Header</p>
    </div>
    <div id="primary">
    <p>Primary Sidebar</p>
    </div>
    <div id="content">
    <h1>Main Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem dolor, lacinia ac gravida non, mollis sed ante. Nulla facilisi. Suspendisse consectetur tortor tempor nisl dictum sit amet congue lacus tempus. Vivamus eleifend cursus ante vel sollicitudin. Praesent iaculis est sit amet mi luctus in viverra risus pharetra. Pellentesque euismod rutrum iaculis. Quisque eleifend enim eu justo congue vestibulum. Phasellus augue sapien, feugiat dignissim pulvinar a, aliquam ut arcu. Duis non lacus nec risus posuere semper eu et augue. Nam facilisis porttitor velit. Aenean a mi pulvinar justo volutpat mollis. Nam arcu sem, elementum nec pharetra ac, blandit eget tortor. Curabitur lectus sem, blandit non tempus vitae, sagittis non orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui eros, mattis at blandit sit amet, adipiscing nec urna. Cras vel neque quis massa pretium viverra adipiscing vel enim. Mauris rutrum adipiscing nisl, id porta libero sagittis a. Etiam risus lacus, viverra non porttitor et, tempor eget dolor. Vivamus euismod libero et leo volutpat sollicitudin.</p>
    </div>
    <div id="secondary">
    <h1>Secondary Sidebar</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem dolor, lacinia ac gravida non, mollis sed ante. Nulla facilisi. Suspendisse consectetur tortor tempor nisl dictum sit amet congue lacus tempus. Vivamus eleifend cursus ante vel sollicitudin. Praesent iaculis est sit amet mi luctus in viverra risus pharetra. Pellentesque euismod rutrum iaculis. Quisque eleifend enim eu justo congue vestibulum. Phasellus augue sapien, feugiat dignissim pulvinar a, aliquam ut arcu. Duis non lacus nec risus posuere semper eu et augue. Nam facilisis porttitor velit. Aenean a mi pulvinar justo volutpat mollis. Nam arcu sem, elementum nec pharetra ac, blandit eget tortor. Curabitur lectus sem, blandit non tempus vitae, sagittis non orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui eros, mattis at blandit sit amet, adipiscing nec urna. Cras vel neque quis massa pretium viverra adipiscing vel enim. Mauris rutrum adipiscing nisl, id porta libero sagittis a. Etiam risus lacus, viverra non porttitor et, tempor eget dolor. Vivamus euismod libero et leo volutpat sollicitudin.</p>
    </div>
    <div id="footer">
    <p>Footer</p>
    </div>
    </div>

    </body>
    </html>

  7. #6
    Junior Member rockstarsmasher's Avatar
    Join Date
    May 2011
    Posts
    10
    Member #
    27842
    Thx!

    So did you just change the Doc type?

    It was just because I used random letters to fill in my text? Interesting.

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It wasn't the doctype. It was the really long unspaced string that did it.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com