CODEWITHSUNDEEP
htmlcsscss-float
O.O.
O.O.

Reputation: 2013

Expand a Div Vertically to fit contents

I have Login page, with a div in the center. I have set the height and it fits perfectly. However, if I add validation errors at the top of the div, the button at the bottom gets pushed outside the div. The page is a bit more complicated, but I have simplified it to the following HTML and CSS

<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div id="content">
        <form action="/Account/LogIn" method="post">
            <div id="login" name="login">
                <div id="validation-errors">
                    <ul>
                        <li>
                            One or more errors here
                        </li>
                    </ul>
                </div>
                <label>Email:</label> <input type="email" name="email"> <br/>
                <label>Password:</label> <input type="password" name="password"> <br/>
                <input id="loginBtn" type="submit" value="Login" />
            </div>
        </form>
    </div>
</body>
 </html>

And CSS:

#content {
     position: absolute;
     top: 50%;
     left: 0px;
     width: 100%;
     height: 0px;
     overflow: visible;
     visibility: visible;
     display: block;
 }
 #login {
     background-color:#85ADFF;
     width: 350px;
     height: 100px;
     position: absolute;
     top:-100px;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
 }
 #loginBtn {
     float: right;
}

You can view it at http://jsfiddle.net/9jA2F/

What changes should I make so that the Login button stays in the Blue box div even when validation errors are displayed. If you delete the validation error div, it seems to work fine i.e. the button is within the Blue box div.

Upvotes: 3

Views: 14734

Answers (6)

assembly_wizard
assembly_wizard

Reputation: 2064

Fiddle

I couldn't resist designing all the way ;)

The problem was that once you float an element (like a button) it comes out of the flow, and thus the container doesn't include it in the calculated auto height.

To make the button float right but still not actually float:

display: block;
margin-left: auto;

Hope it helps

Upvotes: 1

omma2289
omma2289

Reputation: 54619

This method will give you true vertical and horizontal centering regardless of the content height (based on this article)

#content {
    display: table;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#content form{
    top: 50%;
    width: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: static;
}

#login {
    background-color:#85ADFF;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -50%;
    text-align: left;
}

Check out the fiddle

Upvotes: 2

ITChristian
ITChristian

Reputation: 11271

Delete height: 100px; and top: -100px; from #login.

Check this: http://jsfiddle.net/9jA2F/8/ .

#content {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 0px;
    overflow: visible;
    visibility: visible;
    display: block;
}

#login {
    background-color:#85ADFF;
    width: 350px;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

#loginBtn {
    float: right;
}

Upvotes: 1

Mihai Alex
Mihai Alex

Reputation: 678

Check updated fiddle http://jsfiddle.net/9jA2F/4/ 

#loginBtn {
position: absolute;
right: 0; bottom: 0;
}
#login {
background-color:#85ADFF;
width: 350px;
height: 100px;
position: relative;
top:-100px;
bottom:0;
left:0;
right:0;
margin:auto;
}

Upvotes: 0

Seano666
Seano666

Reputation: 2238

Why don't you let the div expand with height:auto, and give it padding to maintain the distance between the elements and the borders of the div. That way it can stretch if errors are populated and shrink if no message is present. The error on your jsfiddle does not disappear so I can't test it, but start here and keep trying!

Upvotes: -2

Cody Guldner
Cody Guldner

Reputation: 2886

The problem is that you put bottom:0; on #login. I'm not entirely sure why this would break it, but if you remove that, it works.

Fiddle

Upvotes: 1

Related Questions