Squish table to make it responsive css - html

I want to make my table responsive for the application i am using. I have tried all different approach like making it scroll as the window size decreases. But i want to have a approach where the table squeezes or squishes to fit the size of the window. Please find my code. hope i find an answer soon!
.buttonListContainer {
position: fixed;
top: 8.2%;
}
.buttonlistcontext {
position: fixed;
border: 0.1px solid #ddd;
margin-top: 1px;
background-color: transparent;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
<div class="buttonListContainer" style="overflow:auto;margin-top:0;">
<table id="buttonList" class="buttonlistcontext" style="visibility:hidden;">
<tr>
<!-- the spike count -->
<td>
<font size="2">Eventcount</font>: <input type="text" id="EventCount" style="width:40px;text-align:center;" disabled></td>
<td><button style="cursor:pointer" onclick="reset()"><font size="2">Reset</font></button></td>
<!-- the jump to very beginning button -->
<td><input type="image" id="btn01" style="height:15px;width:15px;" src="images/play_first.png" onclick="jump_firstFrame();" />
<!-- the play back button -->
<input type="image" id="btn02" style="height:15px;width:15px;" src="images/play_back2.png" onclick="playBack();" />
<!-- the go back button -->
<input type="image" id="btn03" style="height:15px;width:15px;" src="images/play_back.png" onclick="go_back();" />
<!-- the stop button -->
<input type="image" id="btn07" style="height:15px;width:15px;" src="images/stop.png" onclick="animationFlag = 0; cancelAnimationFrame(myAnimation);" />
<!-- the go forward button -->
<input type="image" id="btn04" style="height:15px;width:15px;" src="images/play_fwd.png" onclick="go_forward();" />
<!-- the play forward button -->
<input type="image" id="btn05" style="height:15px;width:15px;" src="images/play_forward2.png" onclick="play();" />
<!-- the jump to last button -->
<input type="image" id="btn06" style="height:15px;width:15px;" src="images/play_last.png" onclick="jump_lastFrame();" /></td>
<!-- the speed buttons -->
<td>
<font size="2">Speed</font>: x<select name="PlaySpeed" id="PlaySpeed" onchange="Speed(this.value);">
<option value= "1">1</option>
<option value= "5">5</option>
<option value= "10" selected="selected">10</option>
<option value= "50">50</option>
<option value= "100">100</option>
<option value= "200">200</option>
</select>
</td>
<!-- Wall color drop-down list -->
<td>
<font size="2">Wall color</font>: <select id="WallColor" style="background-color: #CCFFCC" onchange="wallColor(this.value);">
<option value="1" style="background-color: #F0F0F0">Silver gray</option>
<option value="2" style="background-color: #CCFFCC" selected="selected">Mint green</option>
<option value="3" style="background-color: #FCFBE3">Vanilla cream</option>
<option value="4" style="background-color: #d5e8f4">Water blue</option>
</select>
</td>
<!-- the scale up button -->
<td>
<font size="2">Sensitivity</font>: </td>
<td><input type="image" id="btn08" style="height:15px;width:15px;" src="images/scale_up.png" onclick="sensitivity_Up();" /></td>
<td><input type="image" id="btn09" style="height:15px;width:15px;" src="images/scale_down.png" onclick="sensitivity_Down();" /></td>
<!-- the Montage buttons -->
<td>
<font size="2">Montage</font>: <select name="MontageSwap" id="MontageSwap" onchange="montageSwap(this.value);">
<option value= "1" selected="selected">Common Average</option>
<option value= "2">CII</option>
<option value= "3">Bipolar</option>
</select>
</td>
<td>
<!-- <button id="filterBtn" style = "cursor:pointer" onclick="filter()" ><font size="2">Filter</font></button> -->
<a href="javascript:void(0)" onclick="filter()">
<font size="2">Filter</font>
</a>
</td>
<!-- the line cursor -->
<td><input type="checkbox" id="LineCursor" onclick="lineCursorFlag=this.checked;draw_TeeChart()" checked/>
<font size="2">Line cursor</font>
</td>
<!-- the pink bars -->
<td><input type="checkbox" id="BGbar" onclick="BGbarFlag=this.checked;draw_TeeChart()" checked/>
<font size="2">Highlights</font>
</td>
<!-- the Time interval -->
<td>
<font size="2">Time interval</font>: <select name="TimeInterval" id="timeIntervalSelect" onchange="timeInterval=this.value*fs;draw_TeeChart()">
<option value= 5>5 sec</option>
<option value= 10 selected="selected">10 sec</option>
<option value= 20>20 sec</option>
</select>
</td>
<td>
<button id="modalBtn-pre" style="cursor:pointer" onclick="CGI()"><font size="2">Pre-annotation</font></button>
</td>
</tr>
</table>
</div>

You could take a look at adding bootstrap to your project. This could save you a lot of time and effort. Bootstrap is awesome for writing responsive code.
If you have added bootstrap, just do the following to achieve your table effect on mobile:
<div class="table-responsive">
<table class="table">
....
<table>
</div>
That will give you a scrollable table on mobile. If you do not want to go the bootstrap route, you could try the following with the HTML above:
<style>
#media screen and (max-width: 767px){
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
.table{
width: 100%;
max-width: 100%;
}
</style>
That should do the trick. Check out this plunkr.
But really take a look at adding bootstrap.

Well, to make it responsive, you need to do major re-design, using bootstrap, or flexbox, or something else.
But you still can have a responsive table. Add the following code to your CSS, should work:
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
}
If you don't like how it looks like and still want to maintain the table layout for desktop and have something responsive for mobile, here's another trick. You have the normal table layout for desktop, and for mobiles and desktops with less than 900 pixels window width it will be stacked vertically:
#media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: block;
}
}
EDIT: For "squish" effect, you can do it like this:
#media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
width: 32%;/* to have 3 columns */
}
}
Edit 2: Here's a demo using the last edit. 2 things to notice:
Added box-sizing: border-box; to the "td".
Since we're using "display: inline-block;", for the inline-block to work as desired, all white-spaces between "td"s must be removed. Here's an example:
This:
<td>
cell1
</td>
<td>
cell2
</td>
Should be changed to:
<td>
cell1
</td><td>
cell2
</td>

Related

I'm having trouble centering a div

I have been reading everything but I'm not sure why i can not get the buttons to center under the top image. The .page_wrap margins are both auto?
I am trying to get the buttons to center on a desktop browser and samsung note 3 browser
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
}
.page_wrap {
border:0px solid black;
width:350px;
height:10px;
margin-left:auto;
margin-right:auto;
}
.space {
border:0px solid black;
width:250px;
height:150px;
margin-left:auto;
margin-right:auto;
}
input[type="button"], input[type="submit"], button {
background: none;
background-image: url(http://i.imgur.com/9qwHx0c.png);
background-position: center center;
background-repeat: no-repeat;
border: 0px;
height: 71px;
width: 227px;
font-weight:200;
font-size: 40px;
color: #FFFFFF;
/* add the rest of your attributes here */
}
img.shedremote {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/shedmine.css" />
<script>
var device = "http://192.168.1.178/";
function reqListener() {
console.log(this.responseText);
}
function setLed(i, state) {
if (state === undefined || state !== 'on') state = 'off';
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
if (i === 'all') {
oReq.open("GET", device + "?all=" + state);
} else {
oReq.open("GET", device + "?led" + i + "=" + state);
}
oReq.send();
}
</script>
</head>
<body>
<div class="space"></div>
<img class="shedremote" src="http://i.imgur.com/wTL0PlY.png" alt="shedremote">
<div class="space"></div>
<div class="page_wrap">
<table style="width:200%">
<tr>
<td> <input type="button" value="Lights on!" onClick="setLed(1,'on')"/> </td>
<td> <input type="button" value="Lights Off!" onClick="setLed(1,'off')"/> </td>
</tr>
<tr>
<td> <input type="button" value="door open" onClick="setLed(2,'on')" /> </td>
<td> <input type="button" value="door locked" onClick="setLed(2,'off')"/> </td>
</tr>
<tr>
<td> <input type="button" value="3 on" onClick="setLed(3,'on')" /> </td>
<td> <input type="button" value="3 off" onClick="setLed(3,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="Disco on" onClick="setLed(4,'on')" /> </td>
<td> <input type="button" value="Disco off" onClick="setLed(4,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="5 on" onClick="setLed(5,'on')" /> </td>
<td> <input type="button" value="5 off" onClick="setLed(5,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="6 on" onClick="setLed(6,'on')" /> </td>
<td> <input type="button" value="6 off" onClick="setLed(6,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7 on" onClick="setLed(7,'on')" /> </td>
<td> <input type="button" value="7 off" onClick="setLed(7,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="8 on" onClick="setLed(8,'on')" /> </td>
<td> <input type="button" value="8 off" onClick="setLed(8,'off')" /> </td>
</tr>
</table>
</div>
</body>
</html>
To horizontally center the div itself:
/* If the div has the class "button-wrapper" */
.button-wrapper {
margin: 0 auto;
}
Or, to horizontally center the buttons within the div:
/* If each button has the class "button-centered" */
.button-centered {
text-align: center;
}
EDIT: I suppose you could keep using tables if you like. However, tables for layout is often not considered "best practice." For example, responsive design becomes more difficult because tables cannot automatically adapt to different screen sizes.
for your desktop problem i would try:
.page_wrap
{
border:0px solid black;
width:500px;
margin: 0 auto;
}
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
width:100%;
}
and remove style from the html document.
another thing you your page is not compatible for Samsung note 3 browser
you can try and work with Media Queries to help fit your page for desktop and smartphone.
.

What is the correct css width to make these text boxes line up?

I have two rows within a HTML table. Here is a simplified view of it:
#topTextbox {
width: 98%;
}
#bottomTextbox {
width: 693px;
}
<table>
<tr>
<td>
<input type=text id=topTextbox />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input type=text id=bottomTextbox />
</td>
</tr>
</table>
The first row has one long textbox and the second row has a dropdown and a textbox. I am trying to get it so these line up with the same total width. The issue is that as new data comes into the dropdown the width will change so I am trying to figure out the correct css on the bottom textbox so it lines up on the right side with the top textbox.
Here is what it looks like in Firefox:
Here is what it looks like in IE:
So I have an issue today that they don't line up across browsers as well as the fact that this will get worse as items are added to the dropdown (since the bottom has a fixed width).
What is the correct way to keep these textboxes aligned on the right no matter how big the overall table gets as well as new items are added to the dropdown?
This the following approach involves CSS3 box-sizing and calc(). It works fine on IE9+ and all modern browsers.
table {
width: 100%;
}
input,
select {
box-sizing: border-box;
display: inline-block;
}
#topTextbox {
width: 100%;
}
select {
width: calc(30% - 4px);
/* why 4px? http://stackoverflow.com/q/5078239/483779 */
}
#bottomTextbox {
width: 70%;
}
<table>
<tr>
<td>
<input type="text" id="topTextbox" />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input type="text" id="bottomTextbox" />
</td>
</tr>
</table>
Try somthing like this
<table>
<tr>
<td colspan="2">
<input type=text id=topTextbox />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</td>
<td style="width: 100%;">
<input type=text id=bottomTextbox />
</td>
</tr>
</table>
CSS
table {
width: 98%;
}
input {
width: 100%;
}
select{
width: 150px;/**may be**/
}
SEE DEMO http://jsfiddle.net/JentiDabhi/dq3g5k3j/
The following does the asked behavior, but it is made with flexbox instead of table. I decided to post it since it might be helpful.
It is achievable in flexbox with flex-shrink; check the following snippet:
var j = 3;
document.querySelector("button").addEventListener("click", function () {
var opt = document.createElement("option"),
i;
for (i = 0; i < j; i += 1) {
opt.innerHTML += "123456789";
}
j += 1;
document.querySelector("select").appendChild(opt);
});
.container {
width: 98%;
}
.here {
display: flex;
}
.select { flex-shrink: 0; width: auto; }
.input { flex-shrink: 1; width: 100%; }
select, input { width: 100%; }
<div class="container">
<div>
<input type="text" id="topTextbox" />
</div>
<div class="here">
<div class='select'>
<select>
<option></option>
<option>123456789</option>
<option>123456789123456789</option>
</select>
</div>
<div class='input'>
<input type="text" id="bottomTextbox" />
</div>
</div>
</div>
<hr></hr>
<button>Add longer option value</button>
A responsive solution:
By adapting the markup with a div-tag around the text input and a little CSS, it will fill automatically the whole width (unless the select-box fills the table cell).
<table>
<tr>
<td><input type="text" id="topTextbox" /></td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<div><input type="text" id="bottomTextbox" /></div>
</td>
</tr>
</table>
CSS Style:
table{
width: 100%; /* your custom width */
}
input{
box-sizing: border-box;
width: 100%;
overflow: hidden;
clear: none;
}
select{
float: left;
margin-right: 5px; /* your custom margin */
}
div{
overflow: hidden;
}
See the JSFiddle.
This will work also when filling up the select-box dynamically.
i think cellspacing and cellpadding properties should be set for the TABLE tag, and then you can use margin or padding css properties that apply to INPUT and SELECT tags.
furthermore, for the cross-browserness, fixed widths work fine.
Example HTML code:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<input type=text id=topTextbox style="width: 600px" />
</td>
</tr>
<tr>
<td>
<select style="width: 200px">
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</td>
<td >
<input type=text id=bottomTextbox style="width:400px" />
</td>
</tr>
Try use box-sizing like #Pete Suggestion:
#topTextbox,#bottomTextbox{
width: 100%;
box-sizing: border-box;
}
I tested this out in both Chrome and IE. It seems to work properly. Personally, I don't like using values that aren't percentages. However, this comes up well.
http://jsfiddle.net/7sk6p3ex/
<html>
<head>
<style>
.top{width: 300px;}
.bottom{width: 148px;}/* The space between select & input = 4px */
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<td><input class="top" type="text" id="topTextbox"></td>
</tr>
<tr>
<td>
<select class="bottom">
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input class="bottom" type="text" id="bottomTextbox">
</td>
</tr>
</table>
</body>
</html>
Simulate a nested table, get table-like layout behavior
If you can modify the HTML markup, you can achieve the desired result by simulating a nested table with div and span elements styled with display: table and display: table-cell respectively. (You could use an actual nested table, but that isn't semantically ideal for non-tabular data.)
HTML
<div class="input-combo">
<span class="select">
<select>
<option value="0"></option>
<option value="saab">ThisIsAReallyLongName</option>
<option value="mercedes">ThisNameIsMuchLongerThanTheOther</option>
</select>
</span>
<span class="input">
<input type="text" />
</span>
</div>
CSS
.input-combo {
display: table;
border-collapse: collapse;
width: 100%;
}
.input-combo .select,
.input-combo .input {
display: table-cell;
box-sizing: border-box;
}
.input-combo .select {
padding-right: 0.25em;
}
The desired layout behavior you are looking for is native to tables, which is to adjust the width of each cell so that the sum of cell-widths equals the width of the table itself. Browsers handle this logic automatically and rather intelligently.
You can then style each input element to simply have a width of 100%, filling up each cell, and allow the browser to determine the width of the cell based on the width of each cell's contents.
The below example compares two identical tables for which the only difference is the width of the content in the select box. The HTML and CSS is the same.
Example:
table {
width: 100%;
}
input, select {
width: 100%;
box-sizing: border-box;
padding: 1px 0; /* normalize */
}
.input-combo {
display: table;
border-collapse: collapse;
width: 100%;
}
.input-combo .select,
.input-combo .input {
display: table-cell;
box-sizing: border-box;
}
.input-combo .select {
padding-right: 0.25em;
}
<table>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td>
<div class="input-combo">
<span class="select">
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</span>
<span class="input">
<input type="text" />
</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td>
<div class="input-combo">
<span class="select">
<select>
<option value="0"></option>
<option value="saab">ThisIsAReallyLongName</option>
<option value="mercedes">ThisNameIsMuchLongerThanTheOther</option>
</select>
</span>
<span class="input">
<input type="text" />
</span>
</div>
</td>
</tr>
</table>
try this. Works fine for me.
CSS:
table {
width: 98%;
}
input {
width: 100%;
}
HTML:
<table>
<tr>
<td colspan="2">
<input type=text id=topTextbox />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</td>
<td style="width: 100%;">
<input type=text id=bottomTextbox />
</td>
</tr>
</table>
Try this code once
<tr>
<td><input type=text id=topTextbox /></td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input type=text id=bottomTextbox />
</td>
</tr>
#topTextbox
{
width: 98%;
}
#bottomTextbox
{
width: 80%;
}

how to shift the right most box towards the left and of same size as of box1 and box2

I need help to bring the right most box with heading 'This is box3' and id = "bin"
towards the left side just beside the '<- this is button 2' and '<- this is button 3'.
Also the size of the right most box should be of same size as of the other two boxes.
<html>
<body>
<div align="center"><font color="red"><b><span id="Error_App"></span></b></font></div><br>
<font size=3><b>This is box1 </b></font>
<table border=0 width=100%>
<tr>
<td width=35%>
<select multiple="multiple" id="teams" style="width:100%;" size="10">
<option value=AA>teamA</option>
<option value=BB>teamB</option>
<option value=CC>teamC</option>
</select>
</td>
<td width=10% align="left">
<input title='SelectTeamMem.' type="button" id="btn_1" value="this is button 1 ->"></input>
</td>
<td width=50% rowspan= "3" valign = "center">
<font size=2>This is box 3</font>
<br>
<select multiple="multiple" id="bin" style="width:100%;" size="10">
</select>
</td>
</tr>
<tr>
<td>
<div align="center"><font color="red"><b><span id="Error_App"></span></b></font></div><br>
<font size=3><b>This is box 2 </b></font>
</td>
<td width=30% align="left">
<input title='SelectTeamMem.' type="button" id="btn_2" value="<- this is button 2"></input>
<br>
<input title='SelectTeamMem.' type="button" id="btn_3" value="<- this is button 3"></input>
</td>
</tr>
<tr>
<td width=30% valign = "bottom">
<select multiple="multiple" id="mems" style="width:100%;" size="10">
<option value=16313>member1</option>
<option value=16250>member2</option>
<option value=15041>member3</option>
<option value=15041>member4</option>
<option value=15041>member5</option>
</td>
<td width=50% valign="center">
<input title='SelectMembers' type="button" id="btn_4" value="this is button4 ->"></input>
</td>
</tr>
</table>
Move away from the <table> layout and no one gets hurt!
How can I lay this out without a table?!
There are two crucial details
For this example, we are going to rely heavily on:
display: inline-block — look for the simple explanation here — basically, inline-block elements will place themselves on the same line whilst also allowing widths and heights
vertical-align: middle — a little information here — basically, the inline elements will vertically center themselves on their line
The basic layout
Our layout consists of five crucial building blocks:
two <div>'s with display: inline-block — this creates two columns.
two <select>'s with display: inline-block — this allows buttons one and four to align themselves next to each of the selects in the left column
two <button>'s with display: inline-block — these are buttons one and four which line themselves next to each <select>
three <label>'s with display: block — this brings the labels above their respective select groups
The <form> that wraps these elements is given an appropriate width and margin: 0 auto to center everything horizontally. It prevents the right column from sliding underneath the left if the browser window isn't wide enough.
Put everything together and we get...
Show me the example already!
Sure, here it is! You can run the code snippet at the bottom.
div {
display: inline-block;
vertical-align: middle;
padding: 20px 0 0 20px;
}
form {
margin: 0 auto;
width: 622px;
}
label {
display: block;
font-weight: bold;
}
select {
display: inline-block;
vertical-align: middle;
width: 200px;
}
button {
display: inline-block;
vertical-align: middle;
margin-left: 20px;
}
#btn_2, #btn_3 {
display: block;
margin: 1.5em 0 0 225px;
}
<form>
<div class="left">
<label for="teams">This is box1</label>
<select multiple="multiple" id="teams" size="10">
<option value=AA>teamA</option>
<option value=BB>teamB</option>
<option value=CC>teamC</option>
</select>
<button name="SelectTeamMem" id="btn_1" value="this is button 1 ->">
this is button 1 ->
</button>
<button name="SelectTeamMem" id="btn_2" value="<- this is button 2">
<- this is button 2
</button>
<button name="SelectTeamMem" id="btn_3" value="<- this is button 3">
<- this is button 3
</button>
<label for="mems">This is box 2</label>
<select multiple="multiple" id="mems" size="10">
<option value=16313>member1</option>
<option value=16250>member2</option>
<option value=15041>member3</option>
<option value=15041>member4</option>
<option value=15041>member5</option>
</select>
<button name="SelectMembers" id="btn_4" value="this is button4 ->">
this is button4 ->
</button>
</div>
<div class="right">
<label for="bin">This is box 3</label>
<select multiple="multiple" id="bin" size="10">
</select>
</div>
</form>

Put text in line with top of select box

I want to have my text in line with the top of the multiple select box, but it defaults to the bottom. How can I do this? I was also wondering why it defaults to the bottom, I would have thought it would be more common to have it at the top, ie. A label that describes what is in the select box.
HTML:
<div>
<label>
<span>Choose multiple options: </span>
<select name="options" multiple>
<option value="all">ALL</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<span>Choose file: </span> <input type="file"></input>
</label>
</div>
FIDDLE
Add this to your CSS:
span, input {
vertical-align: top;
}
DEMO
Get rid of the display: block; on your labels and the widths of both li and label and it works.
ul {
width: 100%;
background-color: #ccc;
}
li {
padding-top: 6px;
display: inline-block;
}
label {
float: left;
text-align: right;
}
First add an id to the span as below:
<span id="top">Choose multiple options: </span>
then add CSS:
#top{
vertical-align: top;
}
There are a CSS property vertical-align: top;.
Try with this :
span, input{
vertical-align: top;
}
Try in fiddle
you can use table as the following
html :
<div>
<table width="500" cellpadding="5" cellspacing="5">
<tr>
<td align="left" width="250" valign="top">
<span>Choose multiple options: </span>
</td>
<td align="left" width="250" valign="top">
<select name="options" multiple="multiple">
<option value="all">ALL</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</td>
</tr>
<tr>
<td align="left" width="250" valign="top">
<span>Choose file: </span>
</td>
<td align="left" width="250" valign="top">
<input type="file"></input>
</td>
</tr>
</table>
</div>
table have aproperty valign="top" it will help you

Why won't these child divs align to the right-side of their parent?

I am trying to achieve a simple UI with the following design:
But am getting the following (I added solid red lines around each <div>s border so I could see div borders; will be removing them once everything is placed correctly):
Here is the 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="Add"/>
<input id="remove-config-btn" type="button" value="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>
I believe that by setting control-panel-div's right 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 text-align, and box-align). Thanks in advance.
I won't comment about using tables for this, but you can just change your CSS to:
#control-panel-div {
text-align: right;
}​
to get the effect.
jsFiddle example
Try
#control-panel-div {
float: right;
}
Here is the doc if you need to read on the property: http://www.w3schools.com/css/css_float.asp
Without much hassle, and with clearer markup:
<style type="text/css">
form {
width: 300px;
}
fieldset {
float: right;
border: 0;
}
table {
clear: both;
}
</style>
<form action="index.php">
<select name="the_select">
<option selected="selected" id="default">Select an option</option>
<option id="1">option1</option>
<option id="2">option2</option>
</select>
<fieldset>
<legend>Controls</legend>
<button>Add</button>
<button>Remove</button>
</fieldset>
<table>
<tr>
<td>
Blah
</td>
<td>
bleh
</td>
</tr>
<tr>
<td>
Fizz
</td>
<td>
Buzz
</td>
</tr>
</table>
</form>