How to line the label and radio buttons up with submit button

[ShenaniganCoder]

How do I line the radio buttons and labels up with the submit button so they looks like this image. http://imgur.com/a/1plNT 

Instead of this image. http://imgur.com/a/9WpLf

<form>
						<fieldset>
							<a href="http://www.google.com/webhp?safe=vss">
								<img src="http://www.brucetelecom.com/images/google.gif"/>
							</a>
							<br>
							<legend align="left">Google Search:</legend>
							<input id="searchbar" type="text">
							<br />
							<input id="search" type="submit">
							<br />
							<ul>
							<label for="radio2"><input type="radio" id="radio2" value="radio2">Internet</label>
							<label for="radio1"><input type="radio" id="radio1" value="radio1">Bruce Telecom<br />Website</label>																					
						</fieldset>
					</form>

#dummy {
	margin-left: 23px;
	table-layout: fixed;
	text-align: center;
}
#dummy td {
	border: 1px solid black;
}
#searchbar {
	width: 162px;
	border: 1px solid #999999;
	size: 15;
	display: block;
}
#search {
	display: block;
}
#footer table {
	width: 100%
}
h1 {
	font-size: 14px;
}
#radio1, #radio2 {
	margin-top: -1px;
	vertical-align: left;	
}
label {
	display: block;
}

As you can see from my repeated posts for help, I am very dumb

EDIT: I have fixed the problem by using a table but now I get borders which for whatever reason are hard to remove. I have used border: none with no success.

[minibois]

On the actual website, the the search button and both options are aligned to the left collectively by putting a paragraph (<p>) around it and putting "align="left"" in that.

[ShenaniganCoder]

28 minutes ago, Minibois said:

On the actual website, the the search button and both options are aligned to the left collectively by putting a paragraph (<p>) around it and putting "align="left"" in that.

Read my edit.

EDIT: My labels magically dissapeared.http://imgur.com/a/ixeYH

[minibois]

9 minutes ago, ShenaniganCoder said:

Read my edit.

try border-style: none in css.

[Mr_KoKa]

What the submit button has to do with radio and label alignment?

 

 

So first remove <ul> tag, (it is not substitute for creating margins) or at least close it (it is not closed right now!);

 

Change

<label for="radio2"><input type="radio" id="radio2" value="radio2">Internet</label>
<label for="radio1"><input type="radio" id="radio1" value="radio1">Bruce Telecom<br />Website</label>																								

to

<div>
	<input type="radio" id="radio2" value="radio2">
  	<label for="radio2">Internet</label>
</div>
<div>
	<input type="radio" id="radio1" value="radio1">
  	<label for="radio1">Bruce Telecom<br />Website</label>
</div>

and change change label display from block to inline-block, then change #radio1, #radio2 vertical-align to top (there is no such thing as vertical-align: left, it is vertical, so top, middle, bottom and such. No left or right)

 

Excluding input form label lets you group your text inside block (inline) and surrounding both with div makes them one per line.

 

Btw where you do <label><input/> Label</label> there is no need for "for" and "id" as input is inside of label and label knows that it refers to that input. When you have them arranged as I told you to do so, then you need "for" and "id".

 

If you want to create margin then, you can apply class name to each of divs, and apply margin to class, or surround all of them with single div and apply margin to it, like this:

https://jsfiddle.net/6fdyph5p/

I also removed margin-top: -1px; as it didn't seem to do much.

[ShenaniganCoder]

16 hours ago, Mr_KoKa said:

What the submit button has to do with radio and label alignment?

 

 

So first remove <ul> tag, (it is not substitute for creating margins) or at least close it (it is not closed right now!);

 

Change

<label for="radio2"><input type="radio" id="radio2" value="radio2">Internet</label>
<label for="radio1"><input type="radio" id="radio1" value="radio1">Bruce Telecom<br />Website</label>																								

to

<div>
	<input type="radio" id="radio2" value="radio2">
  	<label for="radio2">Internet</label>
</div>
<div>
	<input type="radio" id="radio1" value="radio1">
  	<label for="radio1">Bruce Telecom<br />Website</label>
</div>

and change change label display from block to inline-block, then change #radio1, #radio2 vertical-align to top (there is no such thing as vertical-align: left, it is vertical, so top, middle, bottom and such. No left or right)

 

Excluding input form label lets you group your text inside block (inline) and surrounding both with div makes them one per line.

 

Btw where you do <label><input/> Label</label> there is no need for "for" and "id" as input is inside of label and label knows that it refers to that input. When you have them arranged as I told you to do so, then you need "for" and "id".

 

If you want to create margin then, you can apply class name to each of divs, and apply margin to class, or surround all of them with single div and apply margin to it, like this:

https://jsfiddle.net/6fdyph5p/

I also removed margin-top: -1px; as it didn't seem to do much.

When I used your method, this happened.

http://imgur.com/a/JXnLL

[jking31cs]

17 hours ago, ShenaniganCoder said:

How do I line the radio buttons and labels up with the submit button so they looks like this image. http://imgur.com/a/1plNT 

Instead of this image. http://imgur.com/a/9WpLf

<form>
						<fieldset>
							<a href="http://www.google.com/webhp?safe=vss">
								<img src="http://www.brucetelecom.com/images/google.gif"/>
							</a>
							<br>
							<legend align="left">Google Search:</legend>
							<input id="searchbar" type="text">
							<br />
							<input id="search" type="submit">
							<br />
							<ul>
							<label for="radio2"><input type="radio" id="radio2" value="radio2">Internet</label>
							<label for="radio1"><input type="radio" id="radio1" value="radio1">Bruce Telecom<br />Website</label>																					
						</fieldset>
					</form>

#dummy {
	margin-left: 23px;
	table-layout: fixed;
	text-align: center;
}
#dummy td {
	border: 1px solid black;
}
#searchbar {
	width: 162px;
	border: 1px solid #999999;
	size: 15;
	display: block;
}
#search {
	display: block;
}
#footer table {
	width: 100%
}
h1 {
	font-size: 14px;
}
#radio1, #radio2 {
	margin-top: -1px;
	vertical-align: left;	
}
label {
	display: block;
}

As you can see from my repeated posts for help, I am very dumb

EDIT: I have fixed the problem by using a table but now I get borders which for whatever reason are hard to remove. I have used border: none with no success.

To line up two radio buttons like you want, try adding this to your css

label#radio1Label, label#radio2Label {
  align: left;
}

And add a "<br/>"  after the first label.  I think the problem with your original example is that the labels aren't left-aligned due to the display:block, and your radio buttons, while left aligned, are aligned with regards to the label tags.  

 

For future toying around, I advise using developer tools on Chrome or Firefox for quick testing of the styles to see what happens.  I also advise against id properties in favor of class properties so that you can reuse styles over and over, and this might be a good one to use it on.  Good luck.

[Mr_KoKa]

2 hours ago, ShenaniganCoder said:

When I used your method, this happened.

http://imgur.com/a/JXnLL

Have you looked at working example I posted ( https://jsfiddle.net/6fdyph5p/ )? It looks like you made another fieldset or something that made another block appear, I'm not sure what you did wrong, you can paste that snippet of code or whole html and css if you want to, but if other solution works for you and you don't feel like fiddle with it then it is ok.