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

    Fitting <textarea> inside <div>

    Hello,

    I've tried alot of things and can't seem to work this one out. It was working before (I think) but after making some changes, it is no longer working. I want the red bordered div ("pastedatawrapper") to only occupy the white box on the screen and not extent to the left so that it is also "containing" the grey box. I want the red bordered div to start from the right edge of the grey "lines div". I also want the textarea to appear within and ONLY within the boundaries of the "pastedatawrapper" div (the pastedatawrapper div is basically only made to hold the textarea.

    Code is below:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <style type="text/css">
            body {
               background-color: #EEE;
             }
    
            #pastewrapper {
               margin: 0px 150px 0px 0px;
               height: 700px;
               background-color: white;
               border: 1px solid blue;
            }
    
            #lines {
               width: 30px;
               height: 100%;
               background-color: #CCCCCC;
               border-right: 1px solid black;
               float:left;
            }
    
            #pastedatawrapper {
    
               width: 100%;
               height: 100%;
               border: 1px solid red;
            }
    
            #pastearea {
                    width: 100%;
                    height: 100%;
            }
        </style>
      </head>
      <body>
         <div id="pastewrapper">
            <div id="lines"></div>
               <div id="pastedatawrapper">
               <textarea id="pastearea">Test text</textarea></div>
         </div>
           
      </body>
    
    </html>

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    This appears to be the same question as posted in this thread.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Different issue. The red bordered div is also encompassing the grey lines div and I want the left edge of the red border to BEGIN from the right edge of the grey div ("lines") so that the red bordered div is only containing the text area, and not containing the grey div

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The following code worked for me.

    You cannot have to #pastearea css set to 100% width and height or it pops out of the pastedatawrapper div.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <style type="text/css">
            body {
               background-color: #EEE;
             }
    
            #pastewrapper {
               margin: 0px 150px 0px 0px;
               height: 700px;
               background-color: white;
               border: 1px solid blue;
            }
    
            #lines {
               width: 30px;
               height: 100%;
               background-color: #CCCCCC;
               border-right: 1px solid black;
               float:left;
            }
    
            #pastedatawrapper {
    
               width: 100%;
               height: 100%;
               border: 1px solid red;
            }
    
            #pastearea {
                    width: 98%;
                    height: 99%;
            }
        </style>
      </head>
      <body>
      
         <div id="pastewrapper">
         <div id="lines"></div>
           <div id="pastedatawrapper">
           <textarea id="pastearea">Test text</textarea>
               </div>
         </div> 
           
      </body>
    
    </html>


  •  

    Posting Permissions

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