Hi all, I am trying desperately to align correctly a set of 2 adjacent input boxes, but alas, this is turing into a nightmare and I wonder what guys you think it might be the best approach. Here's the code:

<html>
    <head>
        <title>test</title>
        <style>
        .theForm{
            background-color:#f4f4f4;
            margin-top:14px;
            padding:25px 0 40px 25px;
            font-size: 0.875em;/* 14/16*/
            color: #333333;
        }
        .theForm #email, .theForm #residence {
            margin:0 7% 14px 0; /*percentage is 42/600 */
            width:52.33333333333333%; /* 314/600*/
            float:right;
        }
        .theForm #theMonth {
            width:14.5%; /* 87/600*/
            margin:0 12px 14px 13%; /*percentage is 93/600 */   
        }
        .theForm #theYear{
            width:14.5%; /* 87/600*/    
            margin:0 10px 14px 0; /*percentage is 18/600 */
        }

        .theForm a#mandatory{
            font-size:0.75em;/*12/16*/
        }
        .theForm select option{
            color: #333333;
        }
        .theForm #theDay{
            width:14.5%; /* 87/600*/
            margin:0 12px 14px 18.83333333333333%; /*percentage is 93/600 */    
        }
        .theForm #specificDay{
            width:14.5%; /* 87/600*/    
            margin:0 10px 14px 0; /*percentage is 18/600 */
        }
        .clear{clear:both;}
        #main{
            width:600px;
            margin:0 auto;
        }
        /*REGISTER FORM*/
        </style>
    </head>
    <body>
        <div id="main">
            <div class="theForm">
                <form>
                    Email address:<input type="text" name="email" id="email"><br>
                    <div class="clear"></div>
                    theMonth / theYear of birth:
                        <select name="theMonth" id="theMonth">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theYear" id="theYear">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>
                        <div class="clear"></div>
                        theDay of resignation:
                        <select name="theDay" id="theDay">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theMonth" id="specificDay">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>                          
                        <div class="clear"></div>                         
                        Country of residence:<input type="text" name="country" id="residence"><br>
                        <div class="clear"></div>

                    </form>
                </div>
            </div>
    </body>
</html>

The offending boxes are the theMonth / theYear of birth: and theDay of resignation: (by the way sorry for the internal style sheet but I suppose it saves time!) and they should be aligned with the email address and the country of residence. The thing is if I get it right in a browser then obviously another browser will add some pixels here and there throwing off the alignements. You might see some unsightly percentages there, those are basically assuming themain container being 600px. The problem is I will have to be able to align them using percentage because the design is meant to be responsive.
One option I thought about was to wrap the input fields in their own div - one each I suppose - and try with that, but I realized that, since I need to use percentage, I will have the same problem.
Any advice much appreciated. Also, on a side note, why are my options not visible in the html?
thanks
I need

Recommended Answers

All 4 Replies

Hi Violet. I'd use more like this:

<html>
    <head>
        <title>test</title>
        <style>
        .theForm{
            background-color:#f4f4f4;
            margin-top:14px;
            padding:25px 0 40px 25px;
            font-size: 0.875em;/* 14/16*/
            color: #333333;
        }
        .theForm #email, .theForm #residence {
            width:52.33333333333333%; /* 314/600*/
        }
        .theForm #theMonth {
            width:14.5%; /* 87/600*/
        }
        .theForm #theYear{
            width:14.5%; /* 87/600*/    
        }

        .theForm a#mandatory{
            font-size:0.75em;/*12/16*/
        }
        .theForm select option{
            color: #333333;
        }
        .theForm #theDay{
            width:14.5%; /* 87/600*/
        }
        .theForm #specificDay{
            width:14.5%; /* 87/600*/    
        }
        .clear{clear:both;}
        #main{
            width:600px;
            margin:0 auto;
        }

        .inline
        {
            position: relative;
            display: -moz-inline-stack;
            display: inline-block;
            zoom: 1;
            vertical-align: top;

            *display: inline;
        }
        .label {
            width: 200px;
        }
        .form-row {
            margin-bottom: 10px;
        }
        /*REGISTER FORM*/
        </style>
    </head>
    <body>
        <div id="main">
            <div class="theForm">
                <form>

                    <div class="form-row">
                        <span class="inline label">Email address:</span><input type="text" name="email" id="email">
                    </div>

                    <div class="form-row">
                        <span class="inline label">theMonth / theYear of birth:</span>
                        <select name="theMonth" id="theMonth">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theYear" id="theYear">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>
                    </div>

                    <div class="form-row">
                        <span class="inline label">theDay of resignation:</span>
                        <select name="theDay" id="theDay">
                            <option value="theMonth"></option>
                            <option value="January"></option>
                            <option value="February"></option>
                            <option value="March"></option>
                            <option value="April"></option>
                            <option value="May"></option>
                            <option value="June"></option>
                            <option value="July"></option>
                            <option value="August"></option>
                            <option value="September"></option>
                            <option value="October"></option>
                            <option value="November"></option>
                            <option value="December"></option>
                        </select>
                        <select name="theMonth" id="specificDay">
                            <option value="theYear"></option>
                            <option value="1940"></option>
                            <option value="1941"></option>
                            <option value="1942"></option>
                            <option value="1943"></option>
                            <option value="1944"></option>
                            <option value="1945"></option>
                            <option value="1946"></option>
                            <option value="1947"></option>
                            <option value="1948"></option>
                            <option value="1949"></option>
                            <option value="1950"></option>
                            <option value="1951"></option>
                        </select>
                        <a href="#" id="mandatory">Why this?</a>                          
                    </div>

                    <div class="form-row">                   
                        <span class="inline label">Country of residence:</span><input type="text" name="country" id="residence"><br>
                    </div>

                    </form>
                </div>
            </div>
    </body>
</html>

Tested on IE, FF, Chrome and Opera.

Thanks, so basically to make sure that everything is aligned, I have to have a div for each row

To align horizontally you just need the span(with the label class).
I used an div for each row to align vertically.

I suppose you could work only with margins, but as you are seeing for your self, the headache is bigger ^^

thanks, yes it is a big headache really. It is a really good idea to wrap everything in a div, unfortunately I can't use spans with classes, because the website I am working on will be managed through a CMS which apparently won't allow the addition of classes within spans (yes I know...!) but I think I can get it to work with divs and margins
thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.