How to expand inputs to fit properly

Question

enter image description here

First image is the current one, and the second one is what I'm trying to get. However nothing seems to be working, can anyone help me with this?

index.html

<!DOCTYPE html>
<html>
        <head>
                <title>speaker</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href="css/style.css" rel="stylesheet" media="screen">
        </head>
        <body>
                <div class="block container" id="container">
                        <center><img src="img/logo.png"></img></center>
                        <div class="separator"></div>
                        Name: <input class="block" id="name" type="text">
                        Post: <input class="block" id="post" type="text">
                        <a class="block" href="#" id="submit">Submit!</a>
                        <div class="separator"></div>
                        Followed tags:<input class="block" id="post" type="text"><br>
                        <span class="author">Separate tags with spaces, like; #tomatoes #cats #music
                        <div id="postbreak"></div>
                </div>

                <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
                <script src="js/script.js"></script>
        </body>
</html>

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself — , Oct 12 '13 at 06:35
Does the form need to be responsive (fluid)? Also, there doesn't seem to be an actual form tag in the code? — Josh KG, Oct 12 '13 at 06:49
As Josh KG hinted at, if the form doesn't have to be fluid you could just set explicit widths on your individual input fields. — monners, Oct 12 '13 at 07:08
http://stackoverflow.com/questions/1288297/jquery-auto-size-text-input-not-textarea this will help u — Prem Anand, Oct 12 '13 at 07:10

score 0 · Answer 1 · answered Oct 12 '13 at 07:28

hey you can give a inline styling and change the width of the input box

 Name: <input class="block" id="name" type="text" style="width:150px;">
                    Post: <input class="block" id="post" type="text" style="width:280px;">
                    <a class="block" href="#" id="submit">Submit!</a>
                    <div class="separator"></div>
                    Followed tags:<input class="block" id="post" type="text" style="width:480px;"><br>

score 0 · Answer 2 · answered Oct 12 '13 at 07:28

0

The best way to do that is:

To take percentage of each input from the whole area. Here is how: enter image description here

answered Oct 12 '13 at 07:28

Alaa Badran

1,848
15
19

Percentages would work but you'd also have to take into account the labels for Name and Post as well as the Submit input, float them all, or alternatively give them absolute positioning and appropriate `left` values. – Josh KG Oct 12 '13 at 07:43
Are you doing this as responsive? – Alaa Badran Oct 12 '13 at 07:47

How to expand inputs to fit properly

2 Answers2