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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    CSS Problem/Question

    Alright, so I figured out my last question by reviewing the website the other guy helped me with.

    Here is the outcome: WEBSITE

    But my question/problem is, when there is two much text, instead of expanding the content area, it goes over it. How can I make it so it will expand it instead?

    CSS
    Code:
    body {
    font-family: "Arial";
    background-color: #000000;
    font-size:100%;
    }
    
    #container {
    width: 700px;
    margin:43px auto 0;
    }
    
    #header {
    width: 700px;
    height: 99px;
    background-image:url(images/1.png);
    margin: -24px auto;
    }
    
    #logo {
    width: 400px;
    height: 74px;
    background-image:url(images/logo.png);
    margin: -83px auto;
    }
    
    #nav {
    background-image:url(images/1.png);
    height:34px;
    margin: 85px auto;
    padding-top:11px;
    width:700px;
    }
    
    #content {
    width: 687px;
    height: 350px;
    background-image:url(images/content.jpg);
    margin: 3px auto;
    float: right;
    border-style:solid;
    border-color:#636363;
    }
    
    #left {
    float:left;
    width:200px;
    padding:3px; 
    }
    
    #right {
    float:right;
    width:475px;
    padding:3px; 
    }
    
    #menu {
    list-style:none outside none;
    margin:0 75px;
    }
    
    
    #menu a {
    background:url(images/menuLink.gif) no-repeat scroll left bottom transparent;
    color:#AFAFAF;
    float:left;
    font-size:15px;
    height:31px;
    padding-left:5px;
    position:relative;
    text-decoration:none;
    }
    
    #menu a span{
    background:url(images/menuSpan.gif) repeat scroll right bottom transparent;
    display:block;
    height:25px;
    margin:0;
    padding:6px 15px 0 10px;
    }
    #menu a:hover{background: url(images/menuLink.gif) top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url(images/menuSpan.gif) top right;}
    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"> </div>
    
    <div id="logo"> </div>
    
    <div id="nav">
    <div id="menu">
    
    <div class="menu">
    
    <a href="#"><span>Home</span></a>
    <a href="#"><span>Register</span></a>
    <a href="#"><span>Downloads</span></a>
    <a href="#"><span>Donate</span></a>
    <a href="#"><span>Forum</span></a>
    <a href="#"><span>Vote</span></a>
    <a href="#"><span>Contact</span></a>
    
    </div> 
    </div>
    
    <div id="content"> 
    
    <div id="left">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
    
    <div id="right">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
    
    </div>
    
    </div>
    
    
    
    </body>
    </html>

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    You could change your content height to min-height:

    Code:
    #content {
    width: 687px;
    min-height: 350px;
    background-image:url(images/content.jpg);
    margin: 3px auto;
    float: right;
    border-style:solid;
    border-color:#636363;
    }
    This way if there is little/no content the height will be 350px. Otherwise, it will expand to fit the content.
    Pepe, the bull

  • Users who have thanked Pepe, the bull for this post:

    Decker (09-09-2010)

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Helped kind of. Stopped it from exceeding. But I want it to be able to go as far as it wants, like if I type alot, I want it to got that far, but stay within the content area.

  • #4
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Min-height should let the box expand to fit the content. Is it not doing that? Your site now doesn't have enough text to push the box down yet.
    Pepe, the bull

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Decker View Post
    Helped kind of. Stopped it from exceeding. But I want it to be able to go as far as it wants, like if I type alot, I want it to got that far, but stay within the content area.
    Remove the height from #content. You don't need to set a height for that div at all.

    The reason for it popping out in the first place was because what you put in there is bigger than 350px. Simple reasoning. You can't get an elephant into most refridgerators.

    Dr. V
    Last edited by Doctor_Varney; 09-10-2010 at 01:00 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • Users who have thanked Doctor_Varney for this post:

    Decker (09-10-2010)

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Wow, I knew how that worked I just didn't think of it. Thank you.

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    My pleasure. Maybe only a year ago, the same problem was bugging me.

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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