Search code examples
cssstylesheet

Using CSS to align two text input elements

Sorry if this is such a basic question, but how do I left align two text box elements in different divs with labels that are different lengths? I have a screen shot below. I want to align the textbox for "Dive Profile Id" and "Dive Profile Name". The way I have it now, is the "Dive Profile Id" and "Description" labels and textbox are in one div and the "Dive Profile Name" is in another div. How would I align these two input elements?

enter image description here

Here is my actual HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <LINK href="dive.css" rel="stylesheet" type="text/css">

    </head>
    <body>
        <div id="main" >
            <div id="header">
                <form name="header">
                    <div id="topline">
                       <label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
                       <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
                    </div>
                    <div id="secondline">
                       <label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
                    </div>
                </form>
            </div>
                        <div id="profilePlot">
                        </div>

                        <div id="buttonMenu">
                        </div>
        </div>
        <div name="diveData">
        </div>    
        <div id="mydiv">
        </div>
    </body>
</html>
Solution

  • the easy way is to transform your label into inline blocks and giving them the same size

    with something like this :

    <label class="label" for="profileId"...
<label class="label" for="profileName" ...

    and the CSS, for example:

    .label {
   display: inline-box;
   width: 100px;
}

    so if you want the style in your html :

    <div id="topline">
   <label for="profileId" style="display:inline-box;width:100px;">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
   <label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
   <label for="profileName" style="display:inline-box;width:100px;">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>