Jump to content

Keeping Content In-line Inside Of Divs


bigsilk
 Share

Recommended Posts

See: this pageI want to make all of the content to the right of the numbers get horizontal, such that the email: label and the text box are in line with each other.Making it look: like thisHere's what the CSS looks like:

.choice_box{position:relative;height:150px;width:225px;float:left;}.choice_div{position:absolute;left:30px;top:200px;width:900px;height:130px;border:2px #c37c82 solid;}.choice_box_number{position:relative;left:7px;font-family:Tahoma,Geneva,sans-serif;font-size:60pt;color:#CCCCCC;}.choice_box_function{position:relative;top:-83px;left:50px;font-family:Tahoma,Geneva,sans-serif;font-size:15pt;color:#c37c82;}.input_box{font-family:Tahoma,Geneva,sans-serif;font-size:10pt;color:#2e2d2e;position:relative;top:-80px;left:50px;width:50px;}

and the html:

	<div class="choice_box">	<div class="choice_box_number">1</div>	<div class="choice_box_function">service</div>	<div class="input_box">	<form action="">	<select name="service">	<option value="Service" selected="selected">Service</option>	<option value="woman">woman's cut</option>	<option value="man">men's cut</option>	<option value="color">color</option>	<option value="hilite">highlight</option>	<option value="30_msg">30 min massage</option>	<option value="60_msg">60 min massage</option>	</select>	</form>	</div>	</div>			<div class="choice_box">	<div class="choice_box_number">2</div>	<div class="choice_box_function">date</div>	<div class="input_box"><form action="">Start: <input type="text" size="10" name="startdate"></form><img src="images/calendar.jpg"></div>	<div class="input_box"><form action="">End: <input type="text" size="10" name="enddate"></form><img src="images/calendar.jpg"></div>	</div>			<div class="choice_box">	<div class="choice_box_number">3</div>	<div class="choice_box_function">time</div>	<div class="input_box">	<select name="time_of_day">	<option value="time" selected="Time of day">Time of Day</option>	<option value="morning">Morning</option>	<option value="afternoon">Afternoon</option>	<option value="evening">Evening</option>	</select>	</div>	</div>	<div class="choice_box">	<div class="choice_box_number">4</div>	<div class="choice_box_function">log-in</div>	<div class="input_box"><form action="">Email: <input type="text" name="email"></form></div>	</div>	</div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...