CODEWITHSUNDEEP
htmlcss
user751651
user751651

Reputation:

CSS to place input(textboxes) across from each other

I'm trying to get the second textbox to be across from the first one. Right it is at the bottom righthand side.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
   </head>
   <body>
      <div>
         <h2>Top</h2>
         <div>
            <h2>TextBox 1</h2>
            <div>
               <input type="text" />
            </div>
         </div>
         <div style="float:right;">
            <h2>textbox2</h2>
            <div>
               <input type="text" />
            </div>
         </div>
      </div>
   </body>
</html>

Upvotes: 0

Views: 109

Answers (4)

Binkley
Binkley

Reputation: 91

floating divs for alignment of inputs gets tricky messy with lots of extra code try this cleaner approach that can be styled via CSS:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <style>
        .horz-inputs label, .horz-inputs input {display: inline-block;}
        /*add any css you want to the inputs and labels from this point forward
    </style>
    <body>
        <div class="horz-inputs">
            <h2>Top</h2>
            <label>TextBox 1</label>
            <input type="text" />
            <label>TextBox 2</label>
            <input type="text" />
        </div>
    </body>
</html>

Upvotes: 0

Matt
Matt

Reputation: 85

You basically just need to float both of the divs containing your h2 and input elements. You can either float both left or float the first one left and the second one right (as in this example from your code above):

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <div>
            <h2>Top</h2>
            <div style="float:left;">
                <h2>TextBox 1</h2>
                <div>
                    <input type="text" />
                </div>
            </div>
            <div style="float:right;">
                <h2>textbox2</h2>
                <div>
                    <input type="text" />
                </div>
            </div>
        </div>
    </body>
</html>

Floating both div's left would position the second div right after the first one.

You might also find you need to put a clearing div <div style="clear:both;"></div> immediately after your second floating div. This will prevent elements following these two from being positioned immediately after the last floated element.

Upvotes: 0

Adrift
Adrift

Reputation: 59859

One way is adding float: left; to the first container div, as this shrinks its width to the width of its content, allowing both inputs to appear side by side.

http://jsfiddle.net/uwFyp/

Upvotes: 1

AbstractChaos
AbstractChaos

Reputation: 4211

Just float the first one left

<div style="float:left;">

fiddle

Upvotes: 1

Related Questions