...

View Full Version : css height auto



Uareanoob
07-22-2011, 05:24 AM
http://nofaceproductions.org/
How do I make the middle blue box change size with the surrounding div

vikram1vicky
07-22-2011, 10:16 AM
You want change size horizontally or vertically??

Uareanoob
07-23-2011, 04:05 AM
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.

vikram1vicky
07-23-2011, 08:17 AM
I want the the blue height to go all the way down to the border below without using a constant height.


Use following 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 :)

arlinetis
09-27-2011, 08:44 PM
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)

(http://eblogz.net)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum