CODEWITHSUNDEEP
javascripthtmlcss
Tom Kealy
Tom Kealy

Reputation: 2669

aligning a set of buttons and a texture

I am writing small website, which has a series buttons above a texture. I would like to neaten up the presentation, in particular I'd like to align the buttons with the textarea.

So far, my html is:

<form action='/submit', method="GET">
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button1"></td>
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button2"></td>
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button3"></td>
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button4"></td>
    <td><INPUT TYPE=SUBMIT name="submit" value="Submit" style="float: right"></td> 
    <td><INPUT TYPE=Reset name="reset" value="Reset" style="float: right"></td>
    <Textarea id="ta" name="package" ROWS=100 COLS=111>{{package['text']}}</textareaa>
</form>

I would like all of the buttons and the text area to line up at the right and left margins, and the Submit/Reset buttons to be floated right.

I've included a quick drawing of what I'd like:

What I would like

Upvotes: 0

Views: 50

Answers (2)

jmag
jmag

Reputation: 826

.form{
  height : 250px;
  Width  : 250px;
}
.form  :nth-child(6){
  float:right;
}
.btn{
  display:inline-block;
  width : 23%;
  height : 25px;
  background-color : lightgray;
  border : 1px solid black;
}

.textarea{
  width : 100%;
  height:200px;
  background-color : darkgray;
  border : 1px solid black;
}
<div class="form">
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="textarea"></div>
</div>

Upvotes: 1

Anurag Sinha
Anurag Sinha

Reputation: 1032

I am assuming the right and left margin are of same width. In that case, wrap the entire content in a div, set css style, display:inline-block and text-align:center. This will align the div at the center(horizontally). Now set the size of the width accordingly(Lets say if you set it to 80% width, then it would leave 10% space on left as well as right.)

Use float:left or right to set the position of the buttons accordingly.

Upvotes: 1

Related Questions