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

    <DIV> and <TEXTAREA> positioning/sizing

    Hello,

    I can't seem to work this one out. The code is below this post (I dont currently have access to webspace so if you could paste this into a HTML file to test, that would be great. The problem is:

    I am trying to make the <div> with the red border ("pastedatawrapper") extend to the right edge of the <div> with the blue border ("pastewrapper"), and also for the textarea inside this div to extend across the entire length and height of this div (the white area).

    Any other comments in regards to my CSS (and if what I am trying to achieve could be done a better/different way) would be much appreciated, thanks.

    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 {
              
               float:left;
               border: 1px solid red;
            }
    
            #pastearea {}
        </style>
      </head>
    
      <body>
         <div id="pastewrapper">
            <div id="lines"></div>
               <div id="pastedatawrapper">
               <textarea id="pastearea">Test text<br />Test line 2</textarea></div>
         </div>
           
      </body>
    
    </html>

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    908
    Thanks
    0
    Thanked 120 Times in 119 Posts
    Useally divs do what you are trying to achieve, but you have use floated your div, which overides that default behavior.
    When floating a div it shrinks horizontally, becomming only as wide as it need to be able to contain the widest child-element.
    The main purpose of floating is that text can wrap around the element.

    To me it looks like you are trying to make the div stay on the left side of the container.

    remove the float from the div and it will expand.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent, that has increased the div to the width of the other div. However, how can I increase the height of this div so that it reaches the bottom of the white section, or increase the height/width of the textarea to fill the entire red bordered div (and white section).

    Thanks

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Not sure what your empty lines div is meant to do so I have left it out of the css.
    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;
                }
                #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<br />Test line 2</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
    •