Radio button alignment - Help.

milton747 · Jan 27, 2010

Hi,
I'm having trouble aligning radio buttons down the page.
2 buttons per row, but they are not aligned.
Any help welcome. Thanks (New to DIV and CSS)

<HTML>
<form name="regionForm">

<div style="margin: 0 auto">
<div style="width: auto; padding: 5px;">
<input type="radio" name="reg" value="NA" style="font-style:Verdana; font-size:9px;

color:#5a698b">US, Canada</input>

<input type="radio" name="reg" value="ALL" style="font-style:Verdana; font-size:9px;

color:#5a698b">All Countries</input>
</div>

<div style="width:auto; padding: 5px;">
<input type="radio" name="reg" value="EMEA" style="font-style:Verdana; font-size:9px;

color:#5a698b">Europe</input>

<input type="radio" name="reg" value="ASIA" style="font-style:Verdana; font-size:9px;

color:#5a698b">Asia Pacific</input>

</div>

<div style="width:auto; margin-top: 10px; margin-bottom: 10px">
<button type="button"
style="width: 90px; height: 30px; color: #5a698b; font: bold 12px Arial;
padding-top: 1px; padding-bottom: 1px; background: #ddddff; text-align: center;"
onclick="checkform(this);">Update
</button>

</div>
</div>
</form>
</HTML>

audiopro · Jan 28, 2010

By not aligned, do you mean vertically?

The easiest way is by using tables, especially if there are a lot of them. As this is in effect tabular data, that would be the correct use for tables anyhow.

Most sites would use a drop down list rather than radio buttons but the choice is yours.

Keith

http://www.studiosoft.co.uk

ChrisHunt · Jan 28, 2010

Try something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Form Example</title>

  <style type="text/css">
    #region {
      width: 250px;
      overflow: auto;
      float: left;
      margin-bottom: 10px;
      border: none;
    }

    #region legend {
      display: none;
    }


    #region label {
       font-style:Verdana;
       font-size:9px;
       color:#5a698b;
       display:block;
       margin-left: 10px;
       width: 100px;
       float: left;
    }


    #regionForm button {
       clear: both;
       width: 90px;
       height: 30px;
       color: #5a698b;
       font: bold 12px Arial;
       padding-top: 1px;
       padding-bottom: 1px;
       background: #ddddff;
       text-align: center;
    }
  </style>
</head>

<body>

  <form id="regionForm" name="regionForm">
    <fieldset id="region">
      <legend>Region</legend>
      <label for="reg1"><input type="radio" id="reg1" name="reg" value="NA" />US, Canada</label>
      <label for="reg2"><input type="radio" id="reg2" name="reg" value="ALL" />All Countries</label>
      <label for="reg3"><input type="radio" id="reg3" name="reg" value="EMEA" />Europe</label>
      <label for="reg4"><input type="radio" id="reg4" name="reg" value="ASIA" />Asia Pacific</label>
    </fieldset>

   <button type="button" onclick="checkform(this);">Update</button>
  </form>

</body>
</html>

A <fieldset> is a more appropriate element to use in this context than a <div> (try making the border and legend visible to see if you like the effect). Using a <label> element means that clicking the text also sets the radio button. Floating fixed-width elements within a fixed-size area is one way of getting things to line up.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

milton747 · Jan 28, 2010

Thanks Chris.
I'll tinkering with your sample.

Milt.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Radio button alignment - Help.

milton747

Programmer

audiopro

Programmer

ChrisHunt

Programmer

milton747

Programmer

Similar threads

Part and Inventory Search

Sponsor