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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Buttons next to textarea with container

    The layout I want to achieve is a textarea (about 80% width), with a column of buttons next to it. The two elements are also contained within a DIV, which needs to be displayed around them.

    Code:
    +-----------------------------------------+
    | +------------------------------+ +----+ |
    | | Textarea                     | +====+ |
    | |                              | +====+ |
    | +------------------------------+ +----+ |
    +-----------------------------------------+
    I also want the container to be 100% in height and width (with a 1% margin), and the textarea 100% of the height of the container (again, with a 1% margin).

    I have tried floating the textarea left, and nesting the buttons in a DIV which I also float left, but the container is only a few pixels high at the top of the page, rather than surrounding them. The textarea also isn't 100% height, it's just the default height.

    Any help or ideas would be appreciated.

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    What code have you got so far?

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    I've isolated the problem, but still not worked out how to solve it.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >

    <
    html>
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    textarea {
      
    width:80%;
      
    height:96%;
      
    float:left;
      
    margin:1%;
    }
    #buttons {
      
    float:left;
      
    width:16%;
      
    margin:1%;
    }
    input {
      
    width:100%;
      
    margin:10;
    }
    .
    container {
      
    width:98%;
      
    height:98%;
      
    background-color:green;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div class="container">
    <
    form action="submit.php" method="post">
    <
    textarea id="comments" name="comments"></textarea>
    <
    div id="buttons">
    <
    input type="submit" value="Button 1" />
    <
    input type="button" value="Button 2" />
    <
    input type="button" value="Button 3" />
    <
    input type="button" value="Button 4" />
    </
    div>
    </
    form>
    </
    div>
    </
    body>
    </
    html
    It works perfectly without the XHTML doctype, but breaks when the doctype is added. Is there any way to fix this and still have the XHTML?

    Note: I'm only testing in Firefox for the moment.

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Change the type from percent to px and it will work. (In the .Container)
    Last edited by BarrMan; 10-07-2007 at 06:37 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    I don't want it in pixels, though, I want it to fill the entire page.

  • #6
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Then you should define some tag which is bigger than the container with a size attribute so it will know what % to take of the page.

  • #7
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    I've got it almost working. However, I want a 1% margin all the way around the element which contains the form (green background). Whatever I do, it results in scrollbars.

    Revised CSS (some of it is perhaps unnecessary, as I've been experimenting with lots of different styling to try and make this work):

    PHP Code:
    htmlbody {
      
    height:100%;
      
    width:100%;
      
    margin:0;
      
    padding:0;
    }
    textarea {
      
    display:block;
      
    width:80%;
      
    height:96%;
      
    float:left;
      
    margin:1%;
    }
    #buttons {
      
    float:left;
      
    width:15%;
      
    margin:1%;
    }
    input {
      
    width:100%;
      
    margin:1%;
    }
    .
    container {
      
    background-color:green;
      
    width:98%;
      
    height:98%;
      
    padding:0;
      
    margin:1auto;
    }

    form {
      
    height:100%;
      
    width:100%;


  • #8
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Hmm I recall something with the margin set to ' - ' value which disables the scrollbar but I don't remember where you should put it. Try and play around with it.

  • #9
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    I got it working without scrollbars in Firefox, by applying position:relative;top:1%; to the .container. However, scrollbars still appear in IE7 and Opera.

    I couldn't find any solution using negative margins.

    Also, the textarea's height attribute doesn't seem to work in IE -- it's the default 2 rows.

  • #10
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Does anyone have a solution to this problem?

  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    heh it should be simple:

    add before the closing div the following

    <div style="clear:both;"></div>


  •  

    Posting Permissions

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