css is displaying text field behnd text field rather then below

Hello,

I am having an issue where when a hidden field is shown its displaying behind the current textboxes.

If you follow to this site:http://jarrattperkins.com/training/addtraining.aspx

And select training type: session you will see what it does.

the css is
		.rightinfo
		{ 
			float:left;
			width:94px;
			text-align:left;
			}
		.leftinfo
		{
			float:left;
			width:182px;
			text-align:left;
	height: 22px;
}
			#mainaddtraning
			{
				margin-top:50px;
				float:left;
				width:100%;
				
			
			}
			.bothinfo
			{
				width:100%;
				margin-bottom:15px; 
				display:inline-block;
				
			}

Open in new window


html is

<div id="addtrainingbox">  
<div id="addtrainingtext">
 
<h2>Add Training<img id="diary" src="images/diary.png" /></h2></div> <div id="diaryimage"> </div> 
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script>


     
<center>
<div id="mainaddtraning">
<div class="bothinfo">
<div class="rightinfo"> Run Date & Time: </div><div class="leftinfo"><input name="rundatetime" type="text" id="rundatetime" style="width:180px;" /> 
         
        <input type="hidden" name="MaskedEditExtender6_ClientState" id="MaskedEditExtender6_ClientState" /> 
        <span id="MaskedEditValidator6" style="display:none;"></span></div>
          </div>
          <br />
          <div class="bothinfo">
            <div class="rightinfo">Training Type:  </div> <div class="leftinfo"> <select name="Type" id="Type">
	<option value="SteadyRun">Steady Run</option>
	<option value="EasyRun">Easy Run</option>
	<option value="LongRun">Long Run</option>
	<option value="Session">Session</option>

</select></div></div>
    <div class="bothinfo">
            <div class="rightinfo">Terrain Type: </div>
            <div class="leftinfo">     <select name="terrain1" id="terrain1">
	<option value="Road">Road</option>
	<option value="XC">XC</option>
	<option value="Track">Track</option>
	<option value="Other">Other</option>

</select></div>
    <div class="hideme">
    <div class="bothinfo">
            <div class="rightinfo"> Distance (Miles):</div>
             <div class="leftinfo">  <input name="thedistance" type="text" id="thedistance" style="width:30px;" /></div>
             </div>
             </div>
             <div class="hideme2">
              <div class="bothinfo">
            <div class="rightinfo"> Session:</div>
             <div class="leftinfo"> Warmup-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input name="repdistance1" type="text" id="Text1" style="width:30px;" />
                       
                        Min: 
                     <input name="min3" type="text" value="00" maxlength="2" id="Text2" style="width:30px;" />
                        Secs 
                     <input name="sec3" type="text" value="00" maxlength="2" id="Text3" style="width:30px;" /><br /><br />
                  <div id='TextBoxesGroup'>
                        Rep1-
                          &nbsp;&nbsp;Distance:
                       &nbsp;
                      <input name="repdist1" type="text" id="repsit1" style="width:30px;" /><select name="kmormile1" id="kmormile1">	<option value="Miles">Miles</option>	<option value="Km">Km</option></select>
                        Min: 
                     <input name="repmin1" type="text" value="00" maxlength="2" id="repmin1" style="width:30px;" />
                        Secs 
                     <input name="repsec1" type="text" value="00" maxlength="2" id="repsec1" style="width:30px;" /><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>
                      </div> <br />
                                      

Cooldown-&nbsp;

                      &nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input name="TextBox1" type="text" id="TextBox1" style="width:30px;" />
                        Min: 
                     <input name="TextBox2" type="text" value="00" maxlength="2" id="TextBox2" style="width:30px;" />
                        Secs 
                     <input name="TextBox3" type="text" value="00" maxlength="2" id="TextBox3" style="width:30px;" /><br /><br /></div>
             </div>
             <br />
             </div>
               <div class="hideme">
             <div class="bothinfo">
            <div class="rightinfo">Time:</div>
             <div class="leftinfo">  Hr: 
                     <input name="hour1" type="text" value="00" maxlength="2" id="hour1" style="width:30px;" />
                        Min: 
                     <input name="min1" type="text" value="00" maxlength="2" id="min1" style="width:30px;" />
                        Secs 
                     <input name="sec1" type="text" value="00" maxlength="2" id="sec1" style="width:30px;" /></div>
             </div>
             </div>
             <div class="bothinfo">
            <div class="rightinfo">Weather: </div>
             <div class="leftinfo"><select name="weather1" id="weather1">
	<option value="Sunny">Sunny</option>
	<option value="Cloudy">Cloudy</option>
	<option value="Light Rain">Light Rain</option>
	<option value="Heavy Rain">Heavy Rain</option>
	<option value="Windy">Windy</option>
	<option value="Snow">Snow</option>

</select></div>
             </div>
                 <div class="bothinfo">
            <div class="rightinfo"> Comments: </div>
             <div class="leftinfo"><input name="comments1" type="text" id="comments1" style="height:100px;width:150px;" /></div>
             </div>

        <input type="submit" name="Submit" value="Submit" id="Submit" class="button" />
        <input type="submit" name="Cancel" value="Cancel" id="Cancel" />
</div>  
</center>
    </div>

Open in new window

runnerjp2005Asked:
Who is Participating?
 
LZ1Connect With a Mentor Commented:
The absolute first thing you need to do is make sure your HTML is semantic. If text isn't inside of a container(I'm referring to the labels) put it in a container.

This:

             		Warmup-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Distance:
                       &nbsp;<input type="text" style="width:30px;" id="Text1" name="repdistance1">

Open in new window


This code above is absolutely horrible. You should have that text in a label field and it should be right above or right next to the corresponding input.

 <label for="warmup">Warmup-Distance</label>
 <input type="text" style="width:30px;" id="Text1" name="repdistance1">

Open in new window

0
 
COBOLdinosaurCommented:
If you want it on top it needs a z-index.  Adding that might or might not work because the junk scripting ends up generating a bunch of errors.  The doctype is a weak transitional and I see at least one obsolete tag.  The meaningless errors from the scripting are probably getting the way of identifying the serious errors.

If the z-index works it is just luck; but don't worry with all that junk in the page it is bound to give you lots of practice at fixing a broken page anytime you try to do something with it.

Cd&
0
 
runnerjp2005Author Commented:
I have fixed all the error but it still happens... it should be on its own line
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.