From table to div with width:100%

HTML & CSS
1 
<table>
  <tr>
    <td style="width:100%">
      <input type="text" name="q" style="width:100%">
    </td>
    <td class="p5">
      <input type="submit"  value="search" style="width:100%">
    </td>
  </tr>
</table>

The code above which has table code makes it that the submit button is next to input box side by side.

I like to make it the same but without table.

The code below is one of trials for it.
However it seems not to work correctly.


<div>
<span style="width:100%;float:left">
<input type="text" name="q" style="width:100%">
</span>
<span class="p5;float:right">
<input type="submit"  value="search" style="width:100%">
</span>
</div>

The result of the 2 code above is at http://dot.kr/x-test/form2.php

How can I put the submit button next to input box side by side without table?

2

I’m not sure why you expect things to sit side-by-side if you give them each a width of 100%. :stuck_out_tongue:

Try something like this (the inline styles are for demo purposes, of course):


<div style="float:left; width:50%;">
  <input type="text" name="q" style="width:100%">
</div>
<div style="float:right; width: 48%;">
  <input type="submit"  value="search" style="width:100%">
</div>
3

Hi,

If you want the text input to stretch all the way across you can do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.inp {
    float:right;
    margin:0 0 0 5px;
}
span {
    overflow:hidden;
    display:block;
    padding:0 5px;
}
span input {width:100%;margin-left:-5px;}
</style>
</head>
<body>
<div>
    <input  class="inp" type="submit"  value="search">
    <span>
    <input type="text" name="q">
    </span> </div>
</body>
</html>

If you want IE6 support then an extra element is needed.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.inp {float:right}
span {
    overflow:hidden;
    display:block;
    padding:0 10px 0 0;
    zoom:1.0;
}
span b{width:100%;float:left;margin-right:-10px}
span input {width:100%;}
</style>
</head>
<body>
<div>    <input  class="inp" type="submit"  value="search">
    <span><b><input type="text" name="q"></b></span></div>
</body>
</html>

The code above which has table code makes it that the submit button is next to input box side by side.

The table version is pretty broken in Firefox.:wink: