CODEWITHSUNDEEP
jqueryhtmlcssasp.net-mvcasp.net-mvc-3
Chuck Norris
Chuck Norris

Reputation: 15210

CSS alignment problem

How can I make my registration fields like this

enter image description here

How can I achieve this via CSS? I mean, that my textboxes should be aligned from label's end to the page's end...

EDIT

Here is my view part

<div id="member-search">

<h5>Last Name:</h5>
@Html.TextBox("member-last-name")
</div>
<div>
<h5>Pass:</h5>
@Html.TextBox("member-pass")
</div>

<input type="submit" value="Search" class="button"/>
</div>

In CSS I tried a lot, but with no success. width:auto doesn't help and I don't find solution for this. Thanks for help.

Upvotes: 5

Views: 199

Answers (4)

tehshin
tehshin

Reputation: 866

With changes to your view you can achieve this. My answer is based on the following answer: How to make text input box to occupy all the remaining width within parent block?

You can look at the modified version of the answer at http://jsfiddle.net/626B2/63/

HTML:

<div id="parent">
    <div id="inner">
        <label>UserName</label><span><input id="text" type="text" /></span>
    </div>
    <div id="inner">
        <label>pass</label><span><input id="text" type="text" /></span>
    </div>
    <input id="submit" type="button" value="Submit" />
</div>

CSS:

#inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
    white-space:nowrap;

}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}

Upvotes: 5

thirtydot
thirtydot

Reputation: 228302

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

This works in IE7 and greater + all modern browsers.

CSS:

#member-search label {
    float: left
}
#member-search span {
    display: block;
    overflow: hidden;
    padding: 0 4px
}
#member-search input[type="text"] {
    width: 100%
}

HTML:

<div id="member-search">
    <div>    
        <label for="member-last-name">Last Name:</label>
        <span><input type="text" name="member-last-name" /></span>
    </div>
    <div>
        <label for="member-pass">Pass:</label>
        <span><input type="text" name="member-pass" /></span>
    </div>

    <input type="submit" value="Search" class="button" />
</div>

Upvotes: 2

Kyle
Kyle

Reputation: 67244

After I had to refator your HTML to properly reflect the actual rendered code, this is the best I can come up with.

HTML:

<div id="member-search">

<label for="member-last-name">Last Name:</label>
<input type="text" name="member-last-name" class="myInput">
</div>
<div class="clear">
<label for="member-pass">Pass:</label>
<input type="text" name="member-pass" class="myInput">
</div>

<div class="clear">
<input type="submit" value="Search" class="button"/>
</div>

CSS:

#member-search
{
    width: 100%;
}

label
{
    float: left;
}

.myInput
{
    float: right;
    width: 88%;/*MILES AN HOUR, MARTY!*/
}

.clear
{
    clear: both;
}

Check here for an example.

Upvotes: 2

Graeme Leighfield
Graeme Leighfield

Reputation: 3005

here you go

http://jsfiddle.net/8YAhW/

Pay attention to the label tag and the "for" attribute. This helps when tabbing across items commonly used when making forms.

Hope this helps you out

Upvotes: 0

Related Questions