CODEWITHSUNDEEP
htmlcss
secretlygayfrog
secretlygayfrog

Reputation: 29

Trying to get radio buttons to align properly in html/css

I was given a homework assignment to re-create a site that he made Here.

I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.

I did some research and have tried verticle-align but that has not worked out.

This is the HTML that I have: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Form Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="container">
        <h1>Client Registration</h1>
        <form>
            <fieldset>
                <legend>Identity Information</legend>
                <label>Corporate Name:  <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
                <label>Address:  <input type="text" name="address" id="address" size="40" /></label><br><br>
                <label>Contact Name:  <input type="text" name="cname" id="cname" size="40" /></label><br><br>
                <label>Contact Phone:  <input type="text" name="cphone" id="cphone" size="15" /></label>&nbsp;<label>Contact Email:  <input type="text" name="cemail" id="cemail" size="15"</label>
            </fieldset>
            <fieldset>
                <legend>Service Information</legend>
                <input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
                <input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
                <div id="radioButtons">
                    <input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
                    <input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
                    <input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
                </div>
            </fieldset>
            Comments:  <br>
            <textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
            <input type="submit" value="Send Form" />&nbsp;<input type="reset" />
            <br>
        <form>
    </div>
</body>

And here is my CSS: 

/*CSS Document*/ 
#container{
background-color: #C0C0C0;
border: 2px solid black; 
width: 500px; 
margin: auto; 

}
form{
    padding: 4px; 
}
#radioButtons{
    vertical-align: middle; 

}

Any help would be great.

Upvotes: 2

Views: 928

Answers (3)

Grant Miller
Grant Miller

Reputation: 28999

You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.

HTML:

<div id="checkboxes"> <!-- add this div -->
  <input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
  <input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>

CSS:

#checkboxes {
  float: left;
  padding-top: 10px;
}

#radioButtons {
  float: left;
}

Try it Online!

Upvotes: 0

user5469923
user5469923

Reputation: 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Form Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="container">
        <h1>Client Registration</h1>
        <form>
            <fieldset>
                <legend>Identity Information</legend>
                <label>Corporate Name:  <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
                <label>Address:  <input type="text" name="address" id="address" size="40"></label><br><br>
                <label>Contact Name:  <input type="text" name="cname" id="cname" size="40"></label><br><br>
                <label>Contact Phone:  <input type="text" name="cphone" id="cphone" size="15"></label>&nbsp;<label>Contact Email:  <input type="text" name="cemail" id="cemail" size="15" <="" label="">
            </label></fieldset>
            <fieldset style="
">
                <legend>Service Information</legend>
                <div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
                <input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
                </div>
                <div id="radioButtons">
                    <input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
                    <input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
                    <input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
                </div>
            </fieldset>
            Comments:  <br>
            <textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
            <input type="submit" value="Send Form">&nbsp;<input type="reset">
            <br>

    </form>
    </div>
</body>


#container{
	background-color: #C0C0C0;
	border: 2px solid black; 
	width: 500px; 
	margin: auto; 
}
form{
    padding: 4px; 
}
#radioButtons{
    float:left;
	}
#checkBox{
	float:left;
}

please remember that always wrap the content with a div tag. so you will not face such problems.

here is the working demo: Working Demo

wrap the check boxes with a div tag, later give float left for both div id

i hop this will be helpful to you...

Upvotes: 0

Erik Russell
Erik Russell

Reputation: 881

Here try this fiddle http://jsfiddle.net/Lsh3rqLj/3/

I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.

#radioButtons{
vertical-align: middle; 
    float: left;
}

#first{

    float:left;
}

The float is what you need here. you can play with it some more to get a perfect positioning.

EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.

Upvotes: 2

Related Questions