Question

Following is my CSS code :

.registerFormContainer{width: 45%;border: 1px solid #2C5887; border-radius: 5px; text-align: center; margin: 0 auto; height: auto;}
    .registerFormContainer h3{padding: 10px; background: #2C5887; border-top-radius: 5px; width: auto;}
    .registerFormContainer h3 label{color: #fff; font-size: 18px; font-weight: bold;}

Here if I am using the height:auto; then its not displaying the border for .registerFormContainer and .registerFormContainer h3. And if I am using manual height like 300px then its showing the border. But if I am using manual height then the div is not expading after validation error. What should be the issue? I am learning CSS and not have much idea about it.

and Following is my html

<div class="registerFormContainer">      
    <h3><label style="background-image:url( '/images/lock.png'); width: auto; background-repeat:no-repeat; background-position:left center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Create an Account</label></h3>
    <div class="row_2"> 
        <center><?php echo $this->msg; ?></center>                                                                      
        <label  class="label2">&nbsp;</label>
        <?php if ($this->displayimage) { ?>           
            <img src="<?php echo $this->displayimage; ?>"></img>
        <?php } ?>
    </div>
    <div class="row_2"> 
        <label  class="label2">&nbsp;</label>
        <b>Welcome,  <?php if (isset($this->displayname)) echo $this->displayname; ?></b>                                                                                                
    </div>                                                
    <div class="row_2"> 
        <label  class="label_2" for="username">Email:</label>
        <?php if (isset($this->fbid)) { ?>
            <input class="required" id="username" name="username" type="hidden" value="<?php echo $this->email; ?>"/>
            <?php echo $this->email; ?>
        <?php } else { ?>
            <input class="required" id="username" name="username" type="text"/>        
        <?php } ?>
    </div>
    <div class="row_2">
        <label for="password" class="label_2">Password:</label>
        <input class="required" id="rpassword" name="password" type="password"/>
    </div>
    <div class="row_2" >
        <label for="cpassword" class="label_2">Confirm Password:</label>
        <input class="required" id="cpassword" name="cpassword" type="password"/>
    </div>
    <div class="row_2">                        
        <label class="label_2">&nbsp;</label>
        <input type="submit" class="submit" value="Submit" name="submit" id="submit">
    </div>                                                         
</div>

Any help would be appreciated.

Answer 1

Please try overflow-y:auto for class registerFormContainer I hope it will be work for you.

thanks