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 5 of 5

Thread: css height auto

  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css height auto

    http://nofaceproductions.org/
    How do I make the middle blue box change size with the surrounding div

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You want change size horizontally or vertically??

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    You want change size horizontally or vertically??
    I want the the blue height to go all the way down to the border below without using a constant height.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Uareanoob View Post
    I want the the blue height to go all the way down to the border below without using a constant height.

    Use following code:

    Code:
    #your_div 
    {
    overflow:auto; /* increase box height according to content */
    height:300px; /* set height for IE as it does not support min-height/width */
    height:auto !important; /* height will be auto in non-ie browsers */
    min-height:300px;
    }

    Let me know if it is useful or not

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Change Div Size, Color, and Location with the W3C DOM First, though, let’s look at the divs. Below is the green box div and the div of the text link that activates it and a status bar function. The text link below uses the void keyword. It is a good idea to get in the habit of using this keyword around any script code that you call in a link. This special JavaScript keyword tells the browser to ignore any return values—some of which could cause big problems. Or, simply put, the link below is a "do nothing" link there only to make clickable text. The onMouseOver event handler is there only to run the wipe() function, and no, we’re not going to smirk about that. Not a bit. Okay, only a little. This function clears the status bar which otherwise will tell visitors javascript:void(0), which they will not really understand at all. The onClick event handler runs the changewidth() function. In the green box div, the id is "s" and the getElementById method will use this for CSS style property adjustments.

    <div style="position:absolute; left:400px; top:30px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth();">Change width.</a></div>
    <div id="s" style="position:absolute; top:50px; left:400px; width:100px; height:100px; background-color:green; text-align:center;"><br><br><br><b>div box</b></div><BR>
    function wipe(){window.status= " ";} //erase status bar or give it a desired message here (between quotes)



  •  

    Posting Permissions

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