I'm having trouble centering a div - html

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.
.

Related

Sidebar button click uncaught exception

I'm trying to work out why a simple sidebar is unable to catch the "click" of the button and call another script. In the javascript console in chrome, I am getting an "uncaught" notification:
Here is my apps script code:
function openAppointmentSidebar(){
var html = HtmlService.createTemplateFromFile('appointmentSidebar');
var sidebar_html = html.evaluate();
SpreadsheetApp.getUi().showSidebar(sidebar_html);
}
function setAppointmentSidebar(){
var ok = Browser.msgBox("opened!", Browser.Buttons.OK);
}
And then this is my HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<div class="block form-group">
<table>
<tr>
<th>Action</th>
<th>Zapier Hook URL</th>
</tr>
<tr>
<td width="40%">Not Yet</td>
<td> <input type="text" id="cf1" /></td>
</tr>
<tr>
<td>No</td>
<td> <input type="text" id="cf2" /></td>
</tr>
<tr>
<td>Sale </td>
<td><input type="text" id="cf3" /></td>
</tr>
</table>
<br>
<button class="action" id="btn_submit">Save Settings</button>
<br/>
</div>
</div>
<div class="sidebar bottom">
<span class="gray branding-text">Powered by</span>
</div>
<script>
function dostuff(){
google.script.run.openAppointmentSidebar();
}
document.getElementById("btn_submit").addEventListener("click",dostuff);
</script>
</body>
</html>
I'm almost certain I had this working in previous sidebars but obviously something isn't quite right.

Squish table to make it responsive css

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>

Issues in set background for input of form in table

I have created ASP page, which looks like:
I need something like this center image:
I tried to set background for header, it works fine. However, I am not able to set for next button.
Here is my code snippet:
$(document).ready(function() {
// CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px'});
$(container).append('<input type=text class="input" id="tb1" value="Text Element 1" />');
$(container).append('<input type=text class="input" id="tb2" value="Text Element 2" />');
$(container).append('<input type=text class="input" id="tb3" value="Text Element 3" />');
$(container).append('<input type=text class="input" id="tb4" value="Text Element 4" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
var iCnt = 4;
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Text Element ' + iCnt + '" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
}
else { // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
$('#btRemove').click(function() { // REMOVE ELEMENTS ONE PER CLICK.
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) { $(container).empty();
$(container).remove();
$('#btSubmit').remove();
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt')
}
});
$('#btRemoveAll').click(function() { // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$(container).empty();
$(container).remove();
$('#btSubmit').remove(); iCnt = 0;
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue).empty();
$(divValue).remove(); values = '';
$('.input').each(function() {
divValue = $(document.createElement('div')).css({
padding:'5px', width:'200px'
});
values += this.value + ','
});
$(divValue).append('<p><b>Your selected values</b></p>' + values);
$('body').append(divValue);
}
#tbl-two-columns td.invitation-col2
{
padding-left:0px !important;
}
.cs_pendingInvitation img
{
margin-top:3px;
}
// styles for invite more friends -- selva
.invitation-header
{
background: none repeat scroll 0% 0% #C2EBFF;
z-index: 99;
}
#btAdd
{
color: #00BFFF;
}
#main a{
text-decoration:none;
}
input#nextbutton {
padding: 5px 15px;
background: none repeat scroll 0% 0% #00BFFF;
color: #FFF;
border: 0px none;
cursor: pointer;
border-radius: 5px;
}
.input {
color: #333;
height: 25px;
margin: 5px;
width: 380px;
}
<table class="tblmain atep" style="width: 450px;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdbodycontent" align="left">
<table class="wrapper" style="width:450px;margin:0 auto;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdcontainer" align="left">
<table style="width:450px;" id="tbl-two-columns" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<th class="invitation-header" valign="top"> <!-- th added for invite header --selva -->
Help make your neighborhood safer, Invite friends and family
</th> <!-- END - th added for invite header --selva -->
</tr>
<tr>
<td class="invitation-col2" valign="top">
<table id="tab1" class="tab-container" style="width:400px;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top">
<form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onsubmit="return GetTextValue()">
<!--START - Invite Buttons - Selvarani-->
<div style="padding: 5px; margin: 0px;"><input class="input" id="tb1" placeholder="Email" type="text"><input class="input" id="tb2" placeholder="Email" type="text"><input class="input" id="tb3" placeholder="Email" type="text"><input class="input" id="tb4" placeholder="Email" type="text"></div><div id="main"><a style="float: right;" href="#" id="btAdd" value="" class="bt">Invite more friends</a></div><table style="margin: 0px auto 10px; width: 350px;" border="0" cellpadding="0" cellspacing="0">
<input id="contact_list" name="contact_list" value="" type="hidden">
<!--END - Invite Buttons - Selvarani-->
</table>
<p style="">Invite from my address book</p>
<img src="Web5/images/invite-your-contacts.png" style="cursor:pointer;" alt="Invite your contacts" onclick="InviteBoxClick();"><br>
<a href="#cs_container" data-cs-init="true" class="cs_import">
</a>
<input name="cnote" value="" type="hidden">
<input name="pkfamilyinvite" value="0" type="hidden">
<input name="vn" value="0" type="hidden">
<input name="gORn" value="1" type="hidden"><br>
<input style="float: right;" id="nextbutton" name="" value="Next" type="submit"> <!-- id="nextbutton" added for button styles -- selva -->
</form>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="tdfooter" align="left">
<div class="wrapper">
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

Replace this input#nextbutton { with #nextbutton {

margin: 0 auto; in IE9 with struts 1

I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).

Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}

Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please

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>