Radio Button Help

[yoeyoe16]

Greetings,

 

We have purchased a wordpress template and we needed to add some fields to the booking form. The creator told me that we I have to manually add the code. What I have decided to add is some Radio Button choices. I have attached the php file and two screenshots of the booking form. The first one is what it looks like currently, the second one is what I wanted it to look like.

 

Here is the CSS of the booking form:

/*-------------------------------------------------- 
/* booking
/*-------------------------------------------------- */

#booking-form-main{
	display:block;
}


.booking-form{

	background:url(../images/dotwhite75.png);

	padding:30px 0 30px 0;

	text-align:center;

	margin-bottom:30px;

	display:none;

}

.booking-form .text-label{

	padding-bottom:10px;

	display:block;

}

.booking-form input{

	width:97%;

	border:solid 1px #bbb;

}

.booking-form textarea{

	width:98%; height:120px;

}

.booking-form select{

	width:102%;

}

.booking-form .span3{

}

.booking-form i{

	margin-right:8px;

	color:#6a4a3d;

}

.btn-book-submit{

	margin-top:30px;

}

.booking-inner{

	display:inline-block;

	text-align:left;

}

#btn-book-now {

	margin-bottom:30px;

}

#btn-book-now .off{

	display:none;

}

I would really appreciate any help that you would give me

page_reservation.php

[Ansego]

Html / CSS format problem? yes/no side by side?

[yoeyoe16]

yes i would like to be the Yes/No buttons to be side by side

[Ansego]

Have you tried removing all the space between them, try removing the space and sitting them side by side on the same line, if works then press enter to move it to the next line and test again.

<input type="radio" name="shuttleService" <?php if (isset($shuttleService) && $shuttleService=="yes") echo "checked";?> value="yes">Yes<input type="radio" name="shuttleService" <?php if (isset($shuttleService) && $shuttleService=="no") echo "checked";?>value="no">No

Edited March 26, 2014 by Ansego

[yoeyoe16]

i tried but it still didn't work

[Ansego]

Hi.

 

Nothing really stands out at me to be wrong with the code, might be due to tired. You could set it up in a table to stick it together, when ever I had that trouble I removed all the whitespaces and seems to fix it for me, you could try making a div table to hold it together, code below; Other then that I have nothing, maybe the next person might see something I don't, I am curious on the solution of this just the same.

 

This might be useful;

 

--- HTML

      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>


      </div>
  </form>

--- CSS

 

.div-table{
  display:table;         
  width:auto;         
  background-color:#eee;         
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  background-color:#ccc;  
}

Reference: http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css