multiple asp.net elements on one line with label above. 1

[DarwinIT]

I have a mockup of a website to create. The mockup shows sometimes three fields in a line - with the label for the textbox/dropdown etc. above the input element. I am not allowed to use a table which would make this fairly painless. How do I format this so I can get multiple controls on the same line using Divs/css etc?
I put a <br /> between the label and the textbox and that gets me the label above the input element - but that doesn't keep the other elements I want on that line in place.

 

[vacunita]

Make the label surround the input, and ten float the label.

<div class="inputDiv">Input 1:<br><input type="text"></div>

<div class="inputDiv">Input 1<br><select><option>Choose One</option><option>Choose One</option><option>Choose One</option></select>
</div>

<div class="inputDiv">Input 1<br><input type="text"></div>

and your CSS:

#inputDiv{
float:left;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DarwinIT]

It works!!! Thank you so much!!!

 

[DarwinIT]

Hmmm. The sample worked because there were just 3 elements. Now I'm working with the real page and I have 20 or so elements. They all show up on the same line.
It seems like it requires 3 <br /> to break to a new row. There must be a better way to do that? And how do I add padding between the elements in the same row since they end up right beside each other?

 

[vacunita]

Floated elements qwill keep side y side as liong as there is room for them. Once they run out fo room, they drop to the next line. If you want to break a row at a certain place, add any invisible element like yes a <br> tag where you want to break the row, and give it a style of clear:float; to break the floats. The next elements will then start in anew line and float side by side, in the same fashion.

<div id="inputDiv">...</div>
<div id="inputDiv">...</div>
<div id="inputDiv">...</div>
<br style="clear:both;">
<div id="inputDiv">...</div>
<div id="inputDiv">...</div>
<div id="inputDiv">...</div>

As far as padding, I think what you mean is margin, in which case all you need to do is specify margins to the elements in their CSS.

#inputDiv{
float:left;
margin-left:5px;
margin-right:5px;

}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[DarwinIT]

That did the trick!!! Thanks again!!!!

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/