SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded 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


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
  •