How to get a div to stay the same size

Question

Hi all im a newb and trying to get my head round CSS. I have create a div which holds a login and password form for my site. When the user successfully logs in this form disappears using PHP and a welcome message appears to greet the user. My problem is that because the message is smaller than the login form the div shrinks to that size and does not stay the same.

I have tried playing around with width, height, using various position commands like absolute but with no luck.

This is my css for the div called infobox:

    #infobox {

border:2px solid #a1a1a1;
padding-left:16px; 
padding-top:10px;
background:#dddddd;
width:237px;
border-radius:25px;
-moz-border-radius:25px;
float: right; 
padding-bottom: 10px;

    }  

And this is my header css where the above is nested in (if this helps)

    #header {
width: 960px;
margin: 0 auto;
padding: 40px 0;
position: relative;
margin-top: -36px;
    }

Kind regards

Answer 1

if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div.

Answer 2

Try this one. Maybe it will help you out.

enter code here


#infobox {
width:400px;
height:250px;
border:2px solid #a1a1a1;
padding-left:16px; 
padding-top:10px;
background:#dddddd;
border-radius:25px;
-moz-border-radius:25px;
float: right; 
padding-bottom: 10px;
overflow:hidden;
}