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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text overlapping div

    I currently have a paragraph within a div, but the paragraph overlaps the div and onto another part of the web page. How do I stop this?

    HTML:
    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=utf-8" />
    <title>AFC Wimbledon Blog Template</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
    <div id="header"></div>
    <div id="wrap">
    <div id="leftcontent">
    <p>
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    </p>
    <p>
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    </p>
    <p>
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    </p>
    </div>
    <div id="rightcontent">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
    </div>
    </div>
    </body>
    </html>
    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body
    {
    	margin: 0px;
    	padding: 0px;
    }
    	
    #header
    {
    	margin: 0 auto;
    	width: 900px;
    	height: 142px;
    	background:url(images/basicTemplate_header.gif) no-repeat;
    }
    
    #wrap
    {
    	margin: 0 auto;
    	width: 900px;
    	height: 800px;
    	background:url(images/basicTemplate_bg.gif) repeat-x;
    }
    
    #leftcontent 
    {
    	float: left;
    	margin: 0 0 0 50px;
    	width: 650px;
    	height: 750px;
    	background:url(images/basicTemplate_content.gif) repeat-y;
    }
    
    #rightcontent
    {
    	float: right;
    	width: 250px;
    	height: 750px;
    }
    
    #image1
    {
    	background:url(images/basicTemplate_image1.gif) no-repeat;
    	margin: 0 0 0 10px;
    }
    
    #image2
    {
    	clear:both;
    	background:url(images/basicTemplate_image2.gif) no-repeat;
    	margin: 0 0 0 10px;
    }
    
    #image3
    {
    	clear:both;
    	background:url(images/basicTemplate_image3.gif) no-repeat;
    	margin: 0 0 0 10px;
    }
    
    #leftcontent p
    {
    	
    }

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    399
    Thanks
    2
    Thanked 30 Times in 30 Posts
    There are no spaces so the line cannot break to a new line. The over flow can be controlled with:
    overflow-x:hidden // which will truncate the data
    OR
    overflow-x:scroll // that will generate a scrollbar for the element.

    If you want to break the line, then yo could insert <wbr> tags at intervals within the string.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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