CODEWITHSUNDEEP
htmlcss
user2066880
user2066880

Reputation: 5034

Make CSS box as big as HTML inside

Given the code example here: http://jsfiddle.net/YqTmV/, how would I make the box I create in CSS to only be as wide as the HTML elements inside?

HTML:

<div class="login-region">
        <h1>Login</h1>
        <form id="login-form" action="login.php" method="post">
            <table>
                <tr>
                    <td>Username</td>
                    <td><input type="text" id="username" name="username"/></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input type="password" id="password" name="password"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"/></td>
                </tr>
            </table>
        </form>
    </div>

CSS:

.login-region {
    margin:200px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

h1 {
    font-size: 20px;
    margin: 5px;
    border: 
}

Upvotes: 1

Views: 257

Answers (2)

budi
budi

Reputation: 41

The easiest way is to float the outer box.

.login-region {
  float:left;
}

If you want to make it centered..

position:relative;
left:50%;
margin-left:-Wpx; /* put half the box width on W */

Don't forget to clear it afterwards :)

Upvotes: 1

Adrift
Adrift

Reputation: 59799

Changing the display value of .login-region to inline-block is one way:

.login-region {
    display: inline-block;
    margin:200px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

http://jsfiddle.net/YqTmV/1/

Upvotes: 3

Related Questions