I can not align a form to the right

1
 <form class="red">
   <h1></h1>
 </form>

   <div class="map">
     <center>
       <img class= "imgmap" src="https://data.whicdn.com/images/134220427/large.jpg"alt="Forestvile" width="600px" height="500px"/>
     </center>
   </div>

<form class="yellow">
  <h1></h1>
</form>

Style

.yellow{
    align-self: flex-end;
    width: 300px;
    height: 500px;
    margin-top: -500px;
    background: rgba(255, 251, 0, 0.534);
    justify-content: end;
    align-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
    text-align: end;
    position: relative;
}
    
asked by anonymous 17.05.2018 / 12:52

3 answers

1

School of Life, alright?

You will have to create a DIV to serve as a grid container with the following CSS declarations:

/* Assim declarando, todos os elementos filhos diretos 
daquele container se transformam em grid items.  */
display: grid; 


/* Definindo quantas colunas seu grid ira possuir. */
 grid-template-columns: 1fr 1fr 1fr; 

Here's a really good guide to CSS Grid Layout

Comments:

On this line

 <div class="map">
 <center><img class= "imgmap" src="https://data.whicdn.com/images/134220427/large.jpg"alt="Forestvile" width="600px" height="500px"/></center>
 </div>

The HTML tag <center> This obsolete , define the placement of your elements with css.

Try not to set the size of the images using width or height in the img tag. The recommendation of w3schools and to use the style attributes to set their size. This prevents other project stylesheets from interfering with their size.

form {
  margin: 0 !important;
}

.container-formularios {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
  justify-items: center;
  align-items: center;
  background-color: rgb(206, 206, 206);
}

.map {
  display: grid;
  justify-items: center;
  align-items: center;
}

.map .imgmap {
  max-width: 100%;
}

.yellow {
  width: 100%;
  height: 150px;
  background: rgba(255, 251, 0, 0.534);
  position: relative;
}

.red {
  width: 100%;
  height:150px;
  background: rgb(233, 111, 80);
  position: relative;
}
<div class="container-formularios">
  <form class="red">
    <h1></h1>
  </form>

  <div class="map">
    <img class="imgmap" src="https://data.whicdn.com/images/134220427/large.jpg"alt="Forestvile" />

  </div>

  <form class="yellow">
    <h1></h1>
  </form>

</div>

Has there been any question? I hope I have helped, hug.

    
18.05.2018 / 02:11
0

You are using text-align wrong. You must use text-align: right; or float:right;

See Here the documentation for text-align and Here the float documentation

    
17.05.2018 / 13:00
0

Hello, @School of Life,

Use the float: right property, and the display may also be missing for the element to be assigned to the wrapper context, thus:

.yellow{
  display:inline-block;
  float:right;
}
  • That way, you'll have the entire block of the form positioned to the right.
  • If what you want is not this, but rather that the content of the form is right-aligned, such as label text, fields, and button, then you can do this:

.yellow {     display: inline-block;     text-align: right; }

.yellow h1,
.yellow label,
.yellow input,
.yellow textarea,
.yellow button{
    display:inline-block;
    float:right;
}
    
17.05.2018 / 13:16