CODEWITHSUNDEEP
javascripthtmlcssforms
riccs_0x
riccs_0x

Reputation: 201

Align buttons up and down using CSS

Im trying to make a panel with buttons that have the next arrangement side by side in columns:

enter image description here

But I don't know how to this.

Here is my code

<style>
* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 50%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
	
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    color: white;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    margin: 0 auto;
	display: inline-block;
  
	
}

input[type=submit]:hover {
    background-color: #45a049;
	display: block;
    margin: 0 auto;
	

}

.container {
    border-radius: 5px;
    background-color: #23364B;
    padding: 20px;
	display:inline-block;


}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* this is for when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}


body {
    background-color:#23364B;
    color: white;
    text-align: center;
}

a:link, a:visited {
    background-color: #4CAF50;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	float: right;
    border: none;
    border-radius: 4px;
}


a:hover, a:active {
    background-color: #4CAF50;
}
<body>

<h2>Some title</h2>


<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">key 1</label>
      </div>
      <div class="col-75">
        <input type="text" id="some" name="somethig" placeholder="some text">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">key2</label>
      </div>
      <div class="col-75">
        <input type="text" id="some again" name="more something" placeholder="more text">
      </div>
    </div>
  
    <div class="row">
      <input type="submit" value="action 1">
    </div>
	 <div class="row">
      <input type="submit" value="action 2">
    </div>
	 <div class="row">
      <input type="submit" value="action 3">
    </div>
	 <div class="row">
      <input type="submit" value="action 4">
    </div>
    <div class="row">
      <input type="submit" value="action 5">
    </div>
    <div class="row">
      <input type="submit" value="action 6">
    </div>
	
  </form>
</div>
<a href="1.html">1</a>
</body>

Im guessing that @media screen, the .col-25 and .col-75 statements on css are messing in, but at the same time I dont see how, since this only acts (I think) in the space assignation inside the text areas,labels and buttons, but not outside this elements.

UPDATE The statements mentioned in the css has nothing to do.

Upvotes: 2

Views: 1991

Answers (1)

brk
brk

Reputation: 50346

A div is a block level element, placing a element inside a div will normally move it to next line. In your case , you can use css grid system. and define how many columns you will like to have 

.button-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
<h2>Some title</h2>
<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">key 1</label>
      </div>
      <div class="col-75">
        <input type="text" id="some" name="somethig" placeholder="some text">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">key2</label>
      </div>
      <div class="col-75">
        <input type="text" id="some again" name="more something" placeholder="more text">
      </div>
    </div>

    <div class="button-container">
      <input type="submit" value="action 1">


      <input type="submit" value="action 2">

      <input type="submit" value="action 3">


      <input type="submit" value="action 4">


      <input type="submit" value="action 5">


      <input type="submit" value="action 6">
    </div>

  </form>
</div>
<a href="1.html">1</a>

Upvotes: 2

Related Questions