Add following in your css code:
#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }
it should resolve your issue.
Frage
I'm looking to make an offline search page powered by Google. I am having a little trouble with the search button though, it just seems to do whatever it wants. I want it to be relative above the textarea on the left. I would like for it to stay in that corner of the textarea even when the textarea is expanded. (This webpage is not designed for multi-browser supported it is, designed for Firefox only.)
<style>
body{
background: url(bg.jpg);
background-size: cover;}
textarea{
display: block;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 12px;
color: #ffffff;
font-family:"Courier New", Courier, monospace;
font-size: 16px;
text-decoration: none;
cursor: poiner;
border: none;}
button{
background-color: #000000;
border-radius: 12px;
font-family: "Times New Roman", Times, serif;
font-size: 24px;
text-decoration: none;
cursor: poiner;
border: none;}
button:hover{
border: none;
background: #5B93F5;}
footer{
position: absolute;
bottom: 0px;
right: 0px;
text-align: right;
color: #FFFFFF;}
</style>
</head>
<body>
<div id="searchContainer">
<form id="searchForm" name="searchForm" onsubmit="onSearchSubmit(event)">
<button id="searchSubmit" type="submit" value="Search" title="Google Search">
<font color="blue">G</font><font color="red">o</font><font color="yellow">o</font><font color="blue">g</font><font color="green">l</font><font color="red">e</font>
</button>
<textarea id="searchText" type="text" name="q" maxlength="255" rows="3" cols="50" autocomplete="off" autofocus></textarea>
</form>
</div>
<footer>v5.0</footer>
</body>
</html>
Lösung
Add following in your css code:
#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }
it should resolve your issue.
Andere Tipps
For the code you have, you can add a padding to the container: JS Fiddle
Add this line to your CSS:
#searchContainer{padding: 2em; display: inline-block;}
For a little more style if you want them connected, you can adjust some border-radius' and margins of the button and text area: JS Fiddle 2