CSS Forcing Multiple Selects to One Line

[PCHomepage]

I'm no stranger to CSS but I have a small problem that someone can hopefully help me solve.

On a form, I've removed the old HTML tables and replaced them with a series of styles in an external sheet, some of which look at the field type to position and size it. That's all fine but I have a few instances where that is not working because multiple select boxes need to be presented side by side along with some text between them, as part of a date selector. Of course, this wants to put each selector onto a separate line so I need some way to stop it from doing so in those cases. (Colors, sizes, etc. are simply fillers until I can get it all working.)

.VForm label, .VForm input, .VForm select, .VForm textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.VForm div {
	overflow: hidden;
}

.VForm label {
	font-weight: bold;
	background: linear-gradient(#f1f1f1, #e2e2e2);
	padding: 5px 10px;
	color: #444;
	border: 1px solid #d4d4d4;
	border-right: 0;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	line-height: 1.5em;
	width: 30%;
	float: left;
	text-align: center;
	cursor: pointer;
}

.VForm input, .VForm select {
	width: 70%;
	padding: 5px;
	border: 1px solid #d4d4d4;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 4px;
	line-height: 1.5em;
	float: right;
	box-shadow: inset 0px 2px 2px #ececec;
}

The HTML is dynamic but basically like this as far as the browser is concerned (trimmed for this posting):

<div>
<label for="DateUpdated">Date Updated</label>
<select name="month2" id="month2">
<option value="01">January</option>
<option value="02" SELECTED>February</option>
<option value="03">March</option>
</select>
<select name="day2" id="day2">
<option value="07">07</option>
<option value="08" SELECTED>08</option>
<option value="09">09</option>
</select>
, <select name="year2" id="year2">
<option value="2013">2013</option>
<option value="2014" SELECTED>2014</option>
</select>
 at <select name="hour2" id="hour2">
<option value="21">21</option>
<option value="22" SELECTED>22</option>
<option value="23">23</option>
</select>
:<select name="minute2" id="minute2">
<option value="46">46</option>
<option value="47" SELECTED>47</option>
<option value="48">48</option>
</select>
</div>

Any ideas?

 

[mmerlinn]

I don't see how the CSS is interacting with the HTML that you posted. The HTML shows everything on a single line. So, exactly what are you doing?

mmerlinn

http://mmerlinn.com

Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond

 

[PCHomepage]

I'm not sure what you mean as everything in the HTML I posted is supposed to be on a single line, which is the point and the problem. The style was making each select be on its own line with the text between some of them being shoved over to the left below the label. It was expected as other selects need to be that way but I was looking for a way to "filter out" the styles for a couple specialized selects like this one.

No matter, I removed the select from .VForm input, .VForm select{} and created a separate class and style for this type of select field, which does work after adding a class to the surrounding div:

<div class="NoWrap">
<label for="DateUpdated">Date Updated</label>
<select name="month2" id="month2">
<option value="01">January</option>
<option value="02" SELECTED>February</option>
<option value="03">March</option>
</select>
. . . etc.
</div>

. . . the class for it:

.VForm .NoWrap select {
	clear: both;
	display: inline-block;
	padding: 5px;
	white-space: nowrap;
	line-height: 1.5em;
}

For other selects, the only way I could make them work properly was to also add a class and separate bit style for them. I didn't really want to have to do it this way but without the class, I was unable to get it to not mess up the one above:

.VForm .Select select {
	width: 70%;
	padding: 5px;
	border: 1px solid #d4d4d4;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 4px;
	line-height: 1.5em;
	float: right;
	box-shadow: inset 0px 2px 2px #ececec;
}

Thank you.

 

[vacunita]

I see no element in your html with a class of .VForm

Your further code, now shows an element with a class of .Select inside the element with a class of .VForm but agan no such element in your HTML.

Your CSS implies thar your select boxes assuming they reside inside the proper elements will have a width of 70% of their parent container. This is probably the cause of them falling to the next line, as selects are inline elements by default. But if there isn't enough space to accomodate them they'll drop down.




----------------------------------
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.

Web & Tech