Divis lateral alignment

Question

Divis lateral alignment

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have 2 divs in my code, the first div is an image, the second div is a form, I want to put them both side by side, and when seen on the mobile it breaks, keep one div on top and the other on div How do I do this?

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"/><divclass="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

asked by anonymous 21.08.2017 / 22:23

3 answers

Include semicolon to a variable [duplicate] Phpunit call native function once and return stdClass

score 0 · Answer 1

0

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

img{float:left;}

resolve ...

21.08.2017 / 22:43

score 0 · Answer 2

So it works, here it 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"/><divclass="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>

score 0 · Answer 3

Dude, use mediaqueries ... for example

For screens with a maximum size of 600px;

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

If this is not going to happen, on the big screen it will stay on the side, setting an average query this style will only affect when the size meet

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, it is worth remembering that maybe the ideal is to use some mobile first framework, maybe it will save you some work!