CSS Div Alignment Issue

I've got a contact form setup, with DIV's. The issue I have is when the text within the DIV overlaps, it doesnt sit in line.

My HTML and CSS are as follows (HTML First)

<div class="form_label"><span class="number">7.</span> ¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?</div>

CSS...

.form_label {
cl开发者_如何转开发ear: left;
float: left;
font-size: 10pt;
margin-bottom: 5px;
margin-left: 1px;
padding-top: 0;
width: 553px;
} 

.number {font-weight: bold;}

I have a feeling its a text-align issue. Any help appreciated!!

You could use a table...Or:
<div class="form_label"> <div class="number">7.</div> <div class="content">¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?</div></div>

With CSS:
.number {font-weight: bold; display:inline; width:23px; vertical-align: top;} .content { display:inline-block; width: 530px; }

Try using a span as the outer container if you want it all in-line

Try:

Edit: Forgot to add the <ol> tag. The value attribute doesn't work without it.

<ol>
    <li value="7">¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?
</ol>

You can modify the width property in class form_label and put it to 622px;

Usually, to keep a text in one line, you have to add white-space: nowrap.

In your case, apparently the div hasn't enough room to contain the text: http://jsfiddle.net/PyDAF/

Either you have to shorten text (if you still want width: 553px), or increase the .form-label witdh value.