Suzanne Edelman Creoconcept Suzanne Edelman Creoconcept - 6 months ago 8
HTML Question

<div> with float: left not going left

This should be pretty basic CSS, but no matter what I try, the damn

div
just won't go where it should!

This is the HTML:

<div class="c_container">
<div class="c_title">Registe-se</div>
<form method="post" action="">
<div class="c_data_container">
<div class="c_columns">Nome:</div>
<div class="c_data">
<input type="text" name="name" value="" required/>
</div>
</div>
<div class="c_data_container">
<div class="c_columns">Email:</div>
<div class="c_data">
<input type="email" name="email" value="" required/>
</div>
</div>
<div class="c_data_container">
<div class="c_columns">Telefone:</div>
<div class="c_data">
<input type="text" name="phone" value="" />
</div>
</div>
<div class="c_data_container">
<div class="c_columns">Morada:</div>
<div class="c_data">
<textarea name="address1" ></textarea>
</div>
</div>
<div class="c_data_container">
<div class="c_columns">Morada para envio se diferente da fiscal:</div>
<div class="c_data">
<textarea name="address2" ></textarea>
</div>
</div>
<div class="c_data_container">
<div class="c_columns">N. Contribuinte:</div>
<div class="c_data">
<input type="number" name="fiscal" value="" />
</div>
</div>
<div class="c_data_container">
<div class="c_columns">Palavra passe:</div>
<div class="c_data">
<input type="password" name="password" value="" required/>
</div>
</div>
<div class="passreq">* A palavra passe deve conter pelo menos um número e/ou letra maiúscula.</div>
<input type="submit" name="addcdata" value="Salvar"/>
</form>
</div>


There is a closing
div
tag here that's not appearing in the code section for some reason.

And this is the css:

div.c_container {float:left;width:100%;text-align:left;}
div.c_container .c_title {float:left;width:100%;text-align:center;line-height:35px;font-weight:bold;margin:20px 0;border-bottom:1px solid cor01;}
div.c_container .c_data_container {float:left;width:31%;margin:10px 1%;}
div.c_container textarea, div.c_container input[type=number], div.c_container input[type=text], div.c_container input[type=email], div.c_container input[type=password] {border:0;width:98%;height:20px;background-color:cor09;padding:3px 5px;border-radius:5px;}
div.c_container .passreq {float:left;width:96%;margin:5px 2%;text-align:left;font-size:12px;line-height:16px;}
div.c_container input[type=submit] {float:right;padding:5px;border-radius:0;margin:20px 1% 0 0;}


And for some reason it looks like this:

enter image description here

The password is on the right side instead of the left. Why? I've tried using
display:inline-block
and that didn't work either.

Thanks.

Answer

You were missing the height on c_data_container. Look at this fiddle specifically the height is missing; this should be enough:

height: 45px;

Without the height this is what is happening:enter image description here

Comments