Lateral alignment of Divs

Asked

Viewed 655 times

0

I have 2 Divs in my code, the first div is an image, the second div is a form, I want to put side by side the two, and when seen in the mobile it breaks, stay one div on top and the other on bottom, as I do?

form {
  width: 400px;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
  background-color: #f2f2f2;
  overflow: hidden;
  display: block;
}

div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 300px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 5em;
  resize: vertical;
}

.button {
  padding-left: 90px;
}

button {
  margin-left: .5em;
}


#main img{
	margin-left: 25%;
}
<div id="main">
  <img width="240px" src="https://www.sketchappsources.com/resources/source-image/google-chrome.png"/>
  <div class="center" id="form">
    <form action="/my-handling-form-page" method="post">
      <div>
        <label for="name"></label>
      	<input placeholder=" Nome Completo" type="text" id="name" name="user_name">
      </div>
      <div>
        <label for="mail"></label>
     	<input placeholder=" E-mail" type="email" id="mail" name="user_email">
      </div>
      <div>
        <label for="fone"></label>
        <input placeholder=" Telefone" type="fone" id="fone" name="user_fone">
      </div>
    </form>
  </div>
</div>

html css div

  • Put the code so we can help

  • One suggestion that works well, is to put the two Divs inside a <p> </p>, so they can adjust the page. But the fastest way you’ll ever run is with bootstrap.

  • Try, instead of using the tag <img />, use a <div /> with a background-image

3 answers

0

There are several ways to do that, but in your case, I believe that:

img{float:left;}

resolve...

  • Already used the float, but the problem is that when I increase the screen dimension to test, the image eats the form or vice versa.

  • Look I just added the img{float:left} at the top of your code and it worked...

0

So resolve, here appears misaligned because the width of the page is small:

form {
  width: 400px;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
  background-color: #f2f2f2;
  overflow: hidden;
}
#left {
  display:left;
}
div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 300px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 5em;
  resize: vertical;
}

.button {
  padding-left: 90px;
}
button {
  margin-left: .5em;
}


#main img{
	float:right;
}
<div id="main">
  <img width="240px" src="https://www.sketchappsources.com/resources/source-image/google-chrome.png"/>
  <div class="center" id="form">
    <form action="/my-handling-form-page" method="post">
      <div>
        <label for="name"></label>
      	<input placeholder=" Nome Completo" type="text" id="name" name="user_name">
      </div>
      <div>
        <label for="mail"></label>
     	<input placeholder=" E-mail" type="email" id="mail" name="user_email">
      </div>
      <div>
        <label for="fone"></label>
        <input placeholder=" Telefone" type="fone" id="fone" name="user_fone">
      </div>
    </form>
  </div>
</div>

0

Dude, use mediators... for example

For screens with a maximum size of 600px;

@media screen and (max-width: 600px) { img{float:right}}

if it will not happen that same, on the big screen it will stay on the side, setting an average query this style will only affect when the size meets

For screens above 600px wide and maximum 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {}

And so it goes according to your need, remember that maybe the ideal is to use some mobile framework first, maybe save you some work!

Browser other questions tagged html css div

You are not signed in. Login or sign up in order to post.