Vertically Aligning 3 Groups of Elements

Hi Experts,

I am trying to align the 2 listboxes and the group of buttons in the middle, but listbox "right" is moving down.

How can I vertically align the 2 listboxes to the same level and how the 4 buttons vertically in the middle of both boxes?

Thank you
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<style>
   
    #left{
        float: left;
        margin-left: 50px;
    }  
    
    .assoc_buttons{
        margin-left: 20px;
        width: 8em;
        margin-right: 20px;
        vertical-align: middle;
    }
    #right{
        clear: both;
      
        
    }
</style>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      
    <form id="frm" name="frm">
        
        <select name="left" id="left" size="7">
            <option value="5">Location C</option>
            <option value="8">Location E</option>
        </select>
        
        <input type="button" class="assoc_buttons" name="btn_add" value="< Add" onclick="add();"><br>
        <input type="button" class="assoc_buttons" name="btn_add_all" value="<< Add All" onclick="add_all();"><br>
        <input type="button" class="assoc_buttons" name="btn_del" value="Delete >" onclick="del();"><br>
        <input type="button" class="assoc_buttons" name="btn_del_all" value="Delete All >>" onclick="del_all();">

        <select name="right" id="right" size="7">
            <option value="4">Location A</option>
            <option value="6">Location B</option>
            <option value="2">Location D</option>
            <option value="10">Location F</option>
            <option value="1">Location G</option>
            <option value="9">Location H</option>
            <option value="7">Location I</option>
            <option value="3">Location J</option>
            
        </select>
        
    </form>
    </body>
</html>

Open in new window

APD TorontoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I used bootstrap for the columns.  It is much easier and along the lines of what you are doing. You don't have to  load the jquery part.

working sample http://jsbin.com/qazabo/1/edit
<!DOCTYPE html>


<html>
    <head>
      <style>
        .leftcol{text-align:right;}
        .midcol{text-align:center;}
        .rightcol{text-align:left;}
        .selectcontainer{width:300px;}
        #left{width:100px;}
        #right{width:100px;}
        .assoc_buttons{width:100px;}
      </style>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      
    <form id="frm" name="frm">
      <div class="selectcontainer">  
      <div class="row">
      <div class="col-xs-4 leftcol">
        <select name="left" id="left" size="7">
            <option value="5">Location C</option>
            <option value="8">Location E</option>
        </select>
        </div><!-- end col -->
        <div class="col-xs-4 midcol">
        <input type="button" class="assoc_buttons" name="btn_add" value="< Add" onclick="add();"><br>
        <input type="button" class="assoc_buttons" name="btn_add_all" value="<< Add All" onclick="add_all();"><br>
        <input type="button" class="assoc_buttons" name="btn_del" value="Delete >" onclick="del();"><br>
        <input type="button" class="assoc_buttons" name="btn_del_all" value="Delete All >>" onclick="del_all();">
        </div>
        <div class="col-xs-4 rightcol">
        <select name="right" id="right" size="7">
            <option value="4">Location A</option>
            <option value="6">Location B</option>
            <option value="2">Location D</option>
            <option value="10">Location F</option>
            <option value="1">Location G</option>
            <option value="9">Location H</option>
            <option value="7">Location I</option>
            <option value="3">Location J</option>
            
        </select>
        </div><!-- end col -->
      </div><!-- end row -->
      </div><!-- end selectcontainer -->
    </form>
    </body>
</html>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are a few projects like this too so you don't have to recreate the wheel http://loudev.com/
0
APD TorontoAuthor Commented:
But for the css part, I thought its something simple because vertically i need to add a few unrelated items, like User's name, phone, etc...?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Everything is vertically aligned although I didn't do anything with the middle. See this  http://jsbin.com/qazabo/2/edit using
 
.midcol{text-align:center;margin-top:10px;} 

Open in new window


If you need more space, just make the box's taller and adjust the top margin of the middle.  

If you dynamically need to make the two box's larger than I would use javascript where you tell the js how many items there are and for each item add a certain amount of pixels to the height. Then based on that set the margin of the middle.  It's all math.
0
APD TorontoAuthor Commented:
I don't understand, is this that difficult to do with plain css?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This seems to work fine http://jsbin.com/qazabo/2/edit?html,output

The only way javascript will come into play is if you dynamically need to shrink or grow the box vertically because you want both box's the same height.  Since there is a vertical scroll for overflow, you are fine just setting it with pure css.

I still think you should use one of the projects that are already doing this.  It will be a lot faster to get into production and they have had time to get the bugs out.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoAuthor Commented:
Did not want to help with actual problem (CSS), but insisted on a ready and more complex solution
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I'm sorry you feel that way.  

I have been down the path to do the very thing you are trying and after spending time on it, was very happy with the plug in, easy to use and looks very nice.  It's not for everybody.

Best of luck on your project.
0
APD TorontoAuthor Commented:
Thank you anyways!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.