How to position html elements with css

Question

How to position html elements with css

Navigation

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

1

I have difficulty setting controls, like: I have a TextArea and would like to put a label next to it, next to the bottom right and below the label, a SELECT control.

Well I've got it, but like that, giving top and left with numeric values, which I do not like much because of browser inconsistencies. Is there a more practical, more reliable way of positioning yourself without having to be numerically setting the control?

I've placed an image and this image is slightly below the label, so I have a space between them. See the full code below.

<form class="form-horizontal" role="form">

      <div class="form-group">
        <label for="lblCnpj" class="col-md-2 control-label">CNPJ:</label>
        <div class="col-md-4">
          <input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
        </div>
          <label for="lblStatus" class="col-md-2 control-label">Status:</label>
          <div class="col-md-4">
              <img src="~/Images/Certo.png" class="col-md-2 control-label"/>
        </div>
      </div>

       <div class="form-group">
        <label for="lblRazao" class="col-md-2 control-label">Razão Social:</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
        </div>
      </div>

       <div class="form-group">
        <label for="lblIdEvento" class="col-md-2 control-label">ID Evento:</label>
        <div class="col-md-2">
          <input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
        </div>
      </div>

   </form>

html css

asked by anonymous 24.06.2014 / 14:44

2 answers

Changing a TextBox for Multiline while maintaining CSS Change the ellipsis style in TextView

score 2 · Answer 1

Use a grids system such as Twitter Bootstrap . Here is an example of a form using the grids system:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

score 0 · Answer 2

Without the use of framework and without numerically fixing the content, it would be interesting to limit your form content within a div, and position them with a certain padding, using floating positioning:

float: left; //left/center/right