SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text flowing out of div

    Hi all,
    I am practicing my CSS layout but have come across a problem in that when i write a lot of text on one line it continues into the next div. I would be grateful if someone could tell me why this is happening.
    Here is my code

    HTML
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    	<link rel="stylesheet" href="primary.css">
    	
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id="header">
    				<h1>CSS Practice</h1>
    			</div>
    		<div id="nav">
    			<ul>
    				<li><a href="#">home</a></li>
    				<li><a href="#">tutorials</a></li>
    				<li><a href="#">About Us</a></li>
    				<li><a href="#">Contact Us</a></li>
    			</ul>
    		</div>
    		<div class="clear"></div>
    		<div id="leftfloat">
    		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
    		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
    		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
    		nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
    		<div id="rightfloat">Right Float</div>
    		<div class="clear"></div>
    		<div id="footer">This is the footer</div>
    		</div>
    	
    	</body>
    </html>

    CSS
    Code:
    body, h1 {
    margin:0;
    padding:0;
    }
    
    #wrapper {
    background-color:#fff;
    width:960px;
    margin:0 auto;
    }
    #header {
    height:50px;
    border-bottom:1px solid #ccc;
    }
    #nav ul{
    list-style:none;
    }
    #nav li {
    float:left;
    }
    .clear {
    clear:both;
    }
    
    #leftfloat {
    width:459px;
    min-height:400px;
    padding:10px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    float:left;
    }
    
    #rightfloat {
    width:460px;
    min-height:400px;
    padding:10px;
    float:right;
    border-top:1px solid #ccc;
    }
    
    #footer {
    border-top:1px solid #ccc;
    }
    Last edited by Paul O'B; Jan 5, 2013 at 05:17. Reason: code tags added

  2. #2
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perhaps add:
    overflow:scroll;
    in the div.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input eis but this doesn't work as creates a scroll as in a text box which i do not want.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know many words that are this long i.e. "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"

    You have to treat unbroken text much the same as if you had put an image in that section that is 600px wide. i.e. just don't do it . If it was a dynamic environment where you had no control you should be trapping input anyway and truncating as you go.

    However, these days you can use "word-wrap:break-word;" to break unbroken text at the boundaries as the modern browsers now support it

    Code:
    #wrapper {
    	background-color:#fff;
    	width:960px;
    	margin:0 auto;
    	word-wrap:break-word;
    }
    It was previously proprietary IE only code but has now been incorporated into the specs and supported in the latest browsers versions.

    A couple of pointers in your code:

    Don't add divs where none are needed.

    e.g.
    Code:
    <div id="nav">
    				<ul>
    						<li><a href="#">home</a></li>
    						<li><a href="#">tutorials</a></li>
    						<li><a href="#">About Us</a></li>
    						<li><a href="#">Contact Us</a></li>
    				</ul>
    		</div>
    The div is superluous unless you have multiple backgrounds being applied.

    The ul is a perfect container.

    Code:
    <ul id="nav">
     <li><a href="#">home</a></li>
     <li><a href="#">tutorials</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">Contact Us</a></li>
    </ul>
    Don't use empty clearers.
    Code:
    <div class="clear"></div>
    Most of the time they are not needed as you could simply have set the footer to clear:both in your example anyway. For the nav you should contain the floats using a mechanism that doesn't need structural markup such as using overflow:hidden on the ul where visible overflow is not required or alternatively the revised clearfix method.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the very informative reply Paul O'B. I was just testing the min-height rule and didn't realise that if you use unbroken text it would overflow out of the div. I will also correct the other issues that you have pointed out. Thanks once again.
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I don't know many words that are this long i.e. "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"

    You have to treat unbroken text much the same as if you had put an image in that section that is 600px wide. i.e. just don't do it . If it was a dynamic environment where you had no control you should be trapping input anyway and truncating as you go.

    However, these days you can use "word-wrap:break-word;" to break unbroken text at the boundaries as the modern browsers now support it

    Code:
    #wrapper {
    	background-color:#fff;
    	width:960px;
    	margin:0 auto;
    	word-wrap:break-word;
    }
    It was previously proprietary IE only code but has now been incorporated into the specs and supported in the latest browsers versions.

    A couple of pointers in your code:

    Don't add divs where none are needed.

    e.g.
    Code:
    <div id="nav">
    				<ul>
    						<li><a href="#">home</a></li>
    						<li><a href="#">tutorials</a></li>
    						<li><a href="#">About Us</a></li>
    						<li><a href="#">Contact Us</a></li>
    				</ul>
    		</div>
    The div is superluous unless you have multiple backgrounds being applied.

    The ul is a perfect container.

    Code:
    <ul id="nav">
     <li><a href="#">home</a></li>
     <li><a href="#">tutorials</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">Contact Us</a></li>
    </ul>
    Don't use empty clearers.
    Code:
    <div class="clear"></div>
    Most of the time they are not needed as you could simply have set the footer to clear:both in your example anyway. For the nav you should contain the floats using a mechanism that doesn't need structural markup such as using overflow:hidden on the ul where visible overflow is not required or alternatively the revised clearfix method.


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
  •