Question

I have a form that it is inside a div, what I want to do is place a table under that form for displaying some results. The problem is that if I write any tag after the form code in the browser it displays at the right of the form instead of below the form. What do I have to do? Is this a CSS thing? Here’s is the html code and the CSS:

<div style="width:55%;height:auto;margin-right:0px;" class="BuscarCliente">
  <form class="buscarForm" name="buscarClienteForm" method="get">
       <label class="formTitle">Buscar Cliente</label>
       <br><br>
       <label class="buscarForm">Ingresa el nombre del cliente a buscar:</label><br>
       <input class="buscarForm" style="width:200px;margin-top:7px;"type="text" name="nombre_cliente"><br><br>
       <input class="buscarForm" type="button" value="Buscar Cliente" onClick="JAVASCRIPT:form.submit()">
    </form>  

   <br><br><span>THIS STUFF SHOULD BE BELOW</span>
</div>

This is the css

form.buscarForm{
   color:#486288;
   font-family: 'Source Sans Pro', Helvetica, sans-serif;
   font-size:16px;
   font-weight: 200;
   margin-left:35px;
   margin-top: 15px;
   float: left;
}

Answer 1

Your float: left; css rule instructs the browser to lay out your form as a float. Anything that comes after it will show up to the right unless it’s too big to fit. You can remove that rule if you don’t need it, or you’ll need to style the next element with a clear: both; css rule.

In addition, <span> tags display inline by default, so you’ll also need a block element to come after your floated form that has the clear: both; rule. <div> is a common block element.

Here’s one way to do it: http://jsfiddle.net/HgWgT/