CSS alignment problem

Question

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.

Give the `
`s a fixed width, or put the whole thing in a table. There is no way that I know of to 1) have equal widths, 2) let the width be fluid and 3) not use a table all at the same time. — Jon, Sep 08 '11 at 08:08
This isn't the right code, if you want help with an input, show us code for a rendered input. — Kyle, Sep 08 '11 at 08:13
What is wrong here? I use Razor, which converts Html.Textbox to ... So, which CSS I should give to that inputs? — Chuck Norris, Sep 08 '11 at 08:16
just use jQuery to dynamically process the width, you have listed jQuery as a tag! — Xavier, Sep 08 '11 at 08:30
Why is a question about CSS tagged with "jquery, asp.net-mvc, asp.net-mvc-3"? And why can't I retag that question, but may retag any other question? — feeela, Sep 08 '11 at 08:41

score 5 · Accepted Answer · edited May 23 '17 at 12:17

5

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%;
}

edited May 23 '17 at 12:17

Community

1
1

answered Sep 08 '11 at 08:37

tehshin

866
4
7

Thanks for answer.. And how can I achieve that label's text staying inline? If write "User Name" instead "UserName" second part will go to next line)))) – Chuck Norris Sep 08 '11 at 11:48
whitespace:nowrap solved this problem too... Thank man for the answer))) – Chuck Norris Sep 08 '11 at 11:59
@mesiesta: Note that this answer [won't work in IE7](http://caniuse.com/css-table), if that matters. – thirtydot Sep 08 '11 at 13:19
I know, I'm writing site using html 5, so IE 9+ supporting is enough... But your answer is good too, I vote up for it))) – Chuck Norris Sep 08 '11 at 17:24
Nice! But those `id="inner"` and `id="text"` should really be `class="inner"` and `class="text"`, and the corresponding CSS should use `.inner` and `.text` instead of `#inner` and `#text`. – Daniel Wagner Sep 26 '11 at 15:24

score 2 · Answer 2 · answered Sep 08 '11 at 08:28

2

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.

answered Sep 08 '11 at 08:28

Kyle

65,599
28
144
152

Well, that is fixed width again… – feeela Sep 08 '11 at 08:35
What? 88 %? My textboxes begin point must be end point of span... In your example all textbxoes starts from the same point.. Take a look at my screenshot again... – Chuck Norris Sep 08 '11 at 08:35
I understand your needs, but it's very difficult to do this. If you se the width to 100%; the inputs will float to a new line. This is the only viable way I can think of to closely reproduce your desires at this moment. – Kyle Sep 08 '11 at 08:36

score 2 · Answer 3 · answered Sep 08 '11 at 11:06

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>

score 0 · Answer 4 · answered Sep 08 '11 at 08:15

0

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

answered Sep 08 '11 at 08:15

Graeme Leighfield

2,825
3
23
38

1

In this example the input fields do not span to the end of the page. – Darin Dimitrov Sep 08 '11 at 08:18
My question isn't about it... Watch again to my screenshot... My two textboxes ends in the same point(div's end)... – Chuck Norris Sep 08 '11 at 08:19

CSS alignment problem

`s a fixed width, or put the whole thing in a table. There is no way that I know of to 1) have equal widths, 2) let the width be fluid and 3) not use a table all at the same time.

4 Answers4