How to position the submit button?

StackOverflow https://stackoverflow.com/questions/22418618

Question

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>
Was it helpful?

Solution

Add following in your css code:

#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }

it should resolve your issue.

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top