Aleksandar
New Member
I am trying to achieve a simple UI with the following design:
But am getting the following (I added solid red lines around each \[code\]<div>\[/code\]s border so I could see div borders; will be removing them once everything is placed correctly):
Here is the code:\[code\]<html><head> <title>Options</title> <style> #control-panel-div { right: 0px; } </style> </head><body> <div id="content"> <div id="option-sel-div" style="border: 1px solid red;"> <select id="provider-sel"> <option selected="selected" id="default">Select an option</option> <option id="1">option1</option> <option id="2">option2</option> </select> </div> <div id="config-manage-div" style="border: 1px solid red;"> <div id="control-panel-div" style="border: 1px solid red;"> <input id="add-config-btn" type="button" value="http://stackoverflow.com/questions/12806604/Add"/> <input id="remove-config-btn" type="button" value="http://stackoverflow.com/questions/12806604/Remove"/> </div> <div id="table-div" style="border: 1px solid red;"> <div id="config-datatable"> <table> <tr> <td> Blah </td> <td> bleh </td> </tr> <tr> <td> Fizz </td> <td> Buzz </td> </tr> </table> </div> </div> </div> </div></body></html>\[/code\]I believe that by setting \[code\]control-panel-div\[/code\]'s \[code\]right\[/code\] property have a value of 0px, then all of its children should be right-aligned, but for the life of me I can't get this to work (I have also tried \[code\]text-align\[/code\], and \[code\]box-align\[/code\]). Thanks in advance.