How do I make a text tag as long as the div containing it?


Tags: html,css,layout

Problem :

I have a form input with a label next to it, like this:

<div id="loginbox">
    <form>
        <div>
            <span>Username</span>
            <input type="text">
        </div>

        <div>
            <span>Password</span>
            <input type="password">
        </div>

        <div>
            <input type="submit" value="Login">
        </div>
    </form>
</div>

Then I have some CSS that sets up the width of the login box and the span fields, like so:

#loginbox {
    border: 1px solid black;
    width: 300px;
}

#loginbox span {
    display: inline-block;
    width: 80px;
    text-align: right;
}

Here is the jsfiddle for this code:

http://jsfiddle.net/7TNNq/

Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?



Solution :

See: http://jsfiddle.net/thirtydot/tgGLv/

CSS:

#loginbox {
    border: 1px solid black;
    width: 300px;
}

#loginbox label {
    float: left;
    width: 80px;
}
#loginbox span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 0;
}
#loginbox span input {
    width: 100%;
}

HTML:

<div id="loginbox">
    <form>
        <div>
            <label>Username</label>
            <span><input type="text"></span>
        </div>

        <div>
            <label>Password</label>
            <span><input type="password"></span>
        </div>

        <div>
            <input type="submit" value="Login">
        </div>
    </form>
</div>

    CSS Howto..

    How to get background img to show up in :after selector?

    Css - How to override css for a table cell

    How to space children evenly horizontally in css

    How to get CSS background property to work with toggleClass() in jQuery?

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    How to create a multi colored circle in html and css

    How to apply a complex style to the selection of a Select2 component?

    How to get the ultimate, final calculated style value on an HTML element?

    How to center something I appended with js and also replace it

    In CSS, how can I make a div as high as the entire page?

    How to hide specific lines of css from IE 7 and IE 8

    How can I add to an image an HTML link using Google Chrome extension?

    How can I edit adjacent selector to a nested one

    How to use a CSS for only one div and not the rest of the code?

    How to create a clickable block?

    How to recreate eBay New Logo Page in HTML + CSS

    How to Fade in AFTER the Page has Loaded: Javascript

    Show another element with hover

    How do you force a website to be in landscape mode when viewed on a mobile device?

    How can I add multiple classes to a Rails form input with erb?

    How to style div's so that they don't stack right on top of each other?

    How to implement vertical tables using html5/CSS

    Gantry Framework-Joomla How to edit logo from CSS

    How to limit input text length using CSS3? [duplicate]

    How to get a label under an underlined word in css? [closed]

    How to dynamically modify