Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    text going over the edge of a div

    hello,

    i am having a problem with the text escaping outside the div i have put around it,

    www.bheadccf.co.uk/test.html

    that is the html,

    www.bheadccf.co.uk/temp.css

    and the CSS.

    i am also not sure if i am using the clearfix hack properly.

    thank you very much for your time and help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well what did you expect? Its one long line of text. It has no place for it to break. And you are right you weren't using the clearfix hack properly. Try the following.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website Title</title>
    <link rel="stylesheet" type="text/css" href="temp.css" />
    </head>
    <body>
    <div id="brdr"> banner
    	<div id="nav">
    		<ul id="nav_top">
    			<li class="last"><a href="nothing.html"> Link 3</a></li>
    			<li><a href="nothing.html">Link 2</a></li>
    			<li class="first"><a href="nothing.html">Link 1 </a></li>
    		</ul>
    	</div>
    </div>
    <div id="container" class="clearfix">
    	<div id="left">Left</div>
    	<div id="right">Right</div>
    	<div id="content">
    		<p> Suspendisse odio neque, lacinia vehicula, tincidunt a, elementum ac, nibh. Donec in mi. Suspendisse vel arcu vitae diam molestie euismod! Cras sem tellus, mollis nec, condimentum quis, condimentum at, lorem. Praesent magna lorem, blandit id, auctor in, ultricies eget, sem. Mauris faucibus gravida eros. Pellentesque mollis, ligula sit amet rhoncus vestibulum; massa orci ultrices purus; in pulvinar mi purus ac dolor. Fusce eros mauris, lacinia at; laoreet sit amet, pulvinar sed, risus. Vestibulum fermentum ligula! Integer in nulla ac mauris fringilla sodales. Ut suscipit suscipit risus. Duis sagittis. Suspendisse potenti. Vestibulum nec lacus. Duis eget tortor sit amet sapien rutrum consequat. Suspendisse ac nisl. </p>
    		<p> Suspendisse lorem! Suspendisse id sapien. In auctor est nec justo. Nunc tincidunt velit eu tortor? Donec feugiat, sem vel accumsan gravida, nibh nibh aliquet quam, quis porta felis velit in lectus! Vestibulum dolor. Proin ligula. Aliquam erat volutpat. Nulla a velit a orci ornare ultricies. Curabitur augue. Nulla tempus lorem id massa. Quisque convallis sapien. </p>
    		<p> Ut blandit ultrices lectus! In purus augue, volutpat vel, adipiscing luctus, varius et, augue. Vestibulum dignissim scelerisque nisi. Mauris rutrum. Aliquam erat volutpat. Mauris scelerisque, ante eget ullamcorper ullamcorper, urna neque vulputate quam, in gravida elit augue eget nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras semper pede mattis est. Maecenas vestibulum ipsum vitae nisi imperdiet malesuada. Aliquam ipsum. Sed nisi libero; varius a, semper eget, varius ut, nisl. Nulla vel erat vel ligula rhoncus adipiscing. Etiam sed nisi vitae lacus consequat placerat. In hac habitasse platea dictumst. In diam justo, ornare id, rutrum vitae, tristique non, sapien. Donec tempus ornare lacus. Aenean commodo tortor eu erat. </p>
    	</div>
    	<div id="footer"> footer </div>
    </div>
    </body>
    </html>
    You will need to add this to your CSS
    Code:
    #container {
    background:#FFF;
    color:#000;
    }
    p {
    margin:0;
    padding:10px;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    R4mbini (11-19-2008)

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Put some spaces in that string and it works as you probably expect. Lorem ipsum text is a better alternative than a monolothic string.

  • #4
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you for your help, am i right to be using the clearfix in this situation?
    Last edited by R4mbini; 11-19-2008 at 09:50 PM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes you should but look at how I used in the code I posted. You only need to put it on the containing element that holds the floats. You didn't have one so I made one.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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