HTML Forum

**PostIt** · 03-11-2007, 08:32 PM

Hi. I'm having trouble with aligning radiobuttons and the texts below them. In the attachments you can see what it's like right now, and what I mocked up in Paint how it should be. The current code is below, thanks for any assistance getting this tabled.

Code:

    <td colspan="2" rowspan="2" style="font-family: Arial; background-color: rgb(153, 153, 255);">
      <form style="align: center; margin: 0px;" name="serchbox" action="<?php echo $PHP_SELF; ?>" method="post">
        <div style="text-align: center; background-color: rgb(153, 153, 255);">
          <small><input name="input_text" size="70" maxlength="100" value="" type="text" width=""></small>
        </div>
        <div style="text-align: center; background-color: rgb(153, 153, 255);">
          <font size="1"><input name="options" value="1" checked type="radio">Wdeleriwjd <input name="options" value="2" type="radio">Nesrleadnd <input name="options" value="3" type="radio">Pajltaes <input name="options" value="4" type="radio">Eyepdeccloni <input name="options" value="5" type="radio">Hdaenl</font>
            <div style="text-align: left;">
              <div align="center"><font size="1">
                <span style="color: rgb(204, 102, 0);">
                  <span style="color: rgb(204, 204, 204);">Vdinen.ln Vdinen.ln Vdinen.ln Wedikiipa.rgo Mlarptakats.ln</span>
                </span>
              </font></div>
            </div>
        </div><font size="1">
        <div style="text-align: center; background-color: rgb(153, 153, 255);">
          <input style="background-color: floralwhite;" line-height="xx-small" value=" Doe dit " type="submit">
        </div>
      </font></form>
    </td>

**chrishirst** · 03-13-2007, 06:25 AM

Knowing which is which would help !

but I'll assume you want the text in grey to be below and inline with each of the radio buttons.

If so;
one answer is to use parent containers and float the child elements.

HTML Code:

<style type="text/css">
#parent {
	width:500px;
	margin:0px auto;
	background-color:#9999ff;
	font-size:0.75em;
	
}
.rad_box {
	color:#000000;
	background-color:transparent;
	float:left;
}
.rad_box div {
	color: #cccccc;
	padding:0 ;
	text-align:center;
}
#text-input {
	width:75%;
	margin:0 auto;
}
#options {
	width:75%;
	margin:0 auto;
}
</style>
</head>

<body>

<div id="parent">
<div id="text-input">
<input name="input_text" size="70" maxlength="100" value="" type="text" width="">
</div>
       
<div id="options">

<div class="rad_box">
<input name="options" value="1" checked type="radio">Wdeleriwjd
<div>Vdinen.ln </div></div>

<div class="rad_box">
<input name="options" value="2" type="radio">Nesrleadnd
<div>Vdinen.ln</div></div>

<div class="rad_box">
<input name="options" value="3" type="radio">Pajltaes
<div>Vdinen.ln</div></div>

<div class="rad_box">
<input name="options" value="4" type="radio">Eyepdeccloni
<div>Wedikiipa.rgo</div></div>

<div class="rad_box">
<input name="options" value="5" type="radio">Hdaenl
 <div>Mlarptakats.ln</div></div>
 
 </div> <!-- options -->
 </div> <!-- parent -->

another answer would be just to use a table

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!