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

    Text outside of div

    Hi, I'm an absolute newbie to css so I do apologise if this seems very simple but I can't figure it out. The problem is that any long text goes beyond the div, how do I get the div to fit to the amount of text? Also, the wrapper only goes half way down the page when it is set to 100% and I'd like it to go all the way to the bottom so the colour of it can be seen. Here is the code (hopefully):


    Code:
    html, body{
    	background-color: #C33;
    	margin: 0px;
    	height: 100%;
    }
    
    
    #wrapper {
    	width: 1024px;
    	background-color: #000;
    	height:100%;
    	min-height:100%;
    	margin: 0 auto;
    	overflow:visible;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    
    
    }
    #header {
    	height: 150px;
    	width: 1024px;
    	background-color: #000000;
    	border-radius: 5px;
    
    	-moz-border-radius: 5px;
    	background-image:url(Images/title2.jpg);
    	background-repeat:no-repeat;
    	background-position: 50% 50%;
    
    }
    #navbar {
    	height: 35px;
    	width: 1024px;
    	background-color: #D6D6D6;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	margin-bottom: 3px;
    }
    
    #left {
    	float: left;
    	height: 100%;
    	width: 24%;
    	background-color: #000;
    	margin-bottom: 3px;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	margin-right: 5px;
    }
    #middle {
    	height: 100%;
    	min-height:100%;
    	width: 51%;
    	background-color: #FFF;
    	float: left;
    	margin-bottom: 3px;
    .
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	font-family: Verdana, Geneva, sans-serif;
    }
    #right {
    	float: right;
    	height: 100%;
    	width: 24%;
    	background-color: #000;
    	margin-bottom: 3px;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	font-family: Verdana, Geneva, sans-serif;
    	color: #FFF;
    }
    
    
    #footer {
    	height:30px;
    	width:1024px;
    	background-color:#D6D6D6;
    	clear:both;
    	margin-right:auto;
    	margin-left:auto;
    	margin-top:-30px;
    	margin-bottom:-30px;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	
    	}
    	
    	
    	#navbar ul {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    }
    #navbar ul li {
    	display: inline;
    }
    #navbar ul li a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	float: left;
    	padding-top: 7px;
    	padding-right: 15px;
    	padding-bottom: 0px;
    	padding-left: 15px;
    }
    #navbar ul li a:hover {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-decoration: none;
    	float: left;
    	padding-top: 7px;
    	padding-right: 15px;
    	padding-bottom: 7px;
    	padding-left: 15px;
    	background-color: #999999;
    }

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    5
    Thanked 2 Times in 2 Posts
    html?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,569
    Thanks
    23
    Thanked 643 Times in 642 Posts
    manda I do not see these behaviors, but you need to give us the HTML code and tell us what div your having problems with. And what browsers have you looked at your page with.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    We do need your html code, but in the mean time, try instead of setting a height on wrapper, set

    overflow: auto;

    on wrapper.
    Teed

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Or :
    Code:
    overflow:hidden
    Or delete the #wrapper attribute for height:
    Code:
     height: 100%;
    This should do the job.

  • #6
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    77
    Thanks
    0
    Thanked 12 Times in 11 Posts
    The problem is that you have specfied the height of the div. remove that and the div will just fit the text.


  •  

    Posting Permissions

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