CODEWITHSUNDEEP
htmlcssforms
Alejandro Figueroa
Alejandro Figueroa

Reputation: 419

Can't insert more html tags below html form

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;
}

Upvotes: 0

Views: 125

Answers (2)

Jeff-Meadows
Jeff-Meadows

Reputation: 2184

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/

Upvotes: 4

bpoiss
bpoiss

Reputation: 14003

Add style="clear: both; to the next element after your table, then it will be on the left side.

Upvotes: 1

Related Questions