divs placement and display [closed] - css

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm trying to create a form with this formatting style:
label a
[input text] SUBMIT
label b
[select]
label c
label from [input text] label to [input texŧ] SUBMIT
This is my html with css code:
<style type="text/css">
form {
width:460px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
height:30px;
line-height:30px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
height:30px;
line-height:26px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
height:20px;
width:20px;
background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
border:none;
cursor:pointer;
}
</style>
<div class="margin_top_20">
<form action="">
<div>
<div id="A">
<label>a</label>
<input name="q" value="" type="text">
<input value="" type="submit">
</div>
</div>
<div id="B">
<label>b</label>
<select></select>
</div>
<div id="C">
<label>c</label>
<div id="D">
<label>from</label>
<input name="from" value="" type="text" style="width:50px">
<label>to</label>
<input name="to" value="" type="text" style="width:50px">
<input value="" type="submit">
</div>
</div>
</form>
</div>
I think the problem is that I should set properties like position or float but I don't understand how. Should I use the float:left property for some divs? The way that property works is not very clear to me.

Answer 1

Just add rules specific to the labels in div A and div B
#A label, #B label { display:block}
Demo at http://jsfiddle.net/emTKJ/

Answer 2

I made some changes to your form and CSS and here is the Working Solution as per the format that you want.
The HTML:
<div class="margin_top_20">
<form action="">
<div>
<div id="A">
<label>a</label>
<input name="q" value="" type="text">
<input value="submit" type="button">
</div>
</div>
<div id="B">
<label>b</label>
<select></select>
</div>
<div id="C">
<label>c</label>
<div id="D">
<span>from</span>
<input name="from" value="" type="text" style="width:50px">
<span>to</span>
<input name="to" value="" type="text" style="width:50px">
<input value="submit" type="button">
</div>
</div>
</form>
</div>
The CSS:
form {
width:460px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
display:block;
}
span{
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
height:30px;
line-height:30px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
height:30px;
line-height:26px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
height:20px;
width:20px;
background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
border:none;
cursor:pointer;
}
You just needed to add a display:block; for the form label and a <span> tag for from and to and I changed input type from submit to button and valued as submit. You can change and style it as per your requirement.
Hope this helps.

Answer 3

In my experience, when you want to position a group of element, you should wrapped it with div element and style it. With some element have similar style, add it with the same class. Shouldn't set width of form, just wrap the content inside it with a div and set style for it. I fixed your code here. See full demo in jsfiddle
HTML
<div class="margin_top_20">
<form action="">
<div class="line">
<div id="A">
<div>
<label>Lable A</label>
</div>
<div>
<input name="q" value="" type="text" />
<input value="submit button" type="submit" />
</div>
</div>
</div>
<div class="line" id="B">
<div><label>Label b</label></div>
<div><select></select></div>
</div>
<div class="line" id="C">
<div><label>Label c</label></div>
<div id="D">
<label>from</label>
<input name="from" value="" type="text" style="width:50px" />
<label>to</label>
<input name="to" value="" type="text" style="width:50px" />
<input value="submit button" type="submit" />
</div>
</div>
</form>
</div>
CSS:
form {
}
.line{
padding-top:5px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
border:none;
cursor:pointer;
}