html - CSS height adjusting -
in html have this
<div id="content"> <div id="wrapper"> <div id="steps"> <form id="formelem" name="formelem" action="" method="post"> <fieldset class="step"> <legend>general information </legend> </fieldset> <fieldset class="step"> <legend>medical history</legend> </fieldset> </form> </div> <div id="navigation" style="display:none;"> <ul> <li class="selected"> <a href="#">general information</a> </li> <li> <a href="#">medical history</a> </li> </div> </div>
my css file
#content{ margin:30px auto; text-align:center; width:900px; position: relative; height:100%; } #left{ position: absolute; z-index: 1; margin-top:10px; margin-left:30px; text-align:center; width:170px; color:#000000; height:500px; -moz-box-shadow:0px 0px 13px #aaa; -webkit-box-shadow:0px 0px 13px #aaa; box-shadow:0px 0px 23px #aaa; background-color:rgba(300,250,250,0.5); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #wrapper{ -moz-box-shadow:0px 0px 13px #aaa; -webkit-box-shadow:0px 0px 13px #aaa; box-shadow:0px 0px 23px #aaa; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #fff; //background-color:#f9f9f9; background-color:rgba(220,220,220,0.5); width:1000px; height:100%; overflow:hidden; } #steps{ width:1000px; height:520px; overflow: auto; /* overflow: scroll; overflow: */ } .step{ float:left; width:1000px; /* height:600px; */ overflow-y: auto; /* overflow:-moz-scrollbars-vertical; */ /*height:320px;*/ } #navigation{ height:40px; background-color:#e9e9e9; border-top:1px solid #fff; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } #navigation ul{ list-style:none; float:left; margin-left:10px; } #navigation ul li{ float:left; border-right:1px solid #ccc; border-left:1px solid #ccc; position:relative; margin:0px 2px; } #navigation ul li a{ font-size: 10px; display:block; height:40px; background-color:#444; color:#777; outline:none; font-weight:bold; text-decoration:none; line-height:40px; width: auto; padding:0px 5px; border-right:1px solid #fff; border-left:1px solid #fff; background:#f0f0f0; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240,240,240)), color-stop(0.55, rgb(227,227,227)), color-stop(0.78, rgb(240,240,240)) ); background: -moz-linear-gradient( center bottom, rgb(240,240,240) 9%, rgb(227,227,227) 55%, rgb(240,240,240) 78% ) }
i want adjust height of every fieldset according length of fields present in it. how can this?
fieldsets automatically adjust in height contain form elements contained within. no additional css required.
the fieldsets must contain form fields obviously; not 100% sure why you've omitted them example code.
Comments
Post a Comment