horizontal alignment of checkboxes in a form - Solved

**tmikk** · 02/16/2011, 17:54

I am trying to align three checkboxes horizontally on a form. On this page http://dsweb2.oed.umn.edu/doc-con-submit-files.html I would like the checkboxes for Kurzweil, RTF and Other to show up on one line on after the other. How could I accomplish this?

I also noticed that there is a "Group" checkbox in the backend next to each option. I am not entirely sure what checking this box means.

Thanks for any hints.

**mechaflash** · 02/16/2011, 18:15

This string is screwing up the output of your checkboxes:

Code:

#contact_us_form label{
width:130px;
float:left;
display:block;
margin:5px 0 0;
padding:0;
text-align:right;}

Not gonna break it down for you though XD

**mechaflash** · 02/16/2011, 18:17

wild guess would be either/or the width, float, and text-align...

**tmikk** · 02/17/2011, 17:34

thanks for the pointers! I will dig into it.

**Vera** · 02/17/2011, 22:40

ps, mechaflash lost his money... :lol:

**mechaflash** · 02/17/2011, 23:05

:cry: (display :?: ) don't make me screw with it and waste a bunch of time :D

**mechaflash** · 02/17/2011, 23:20

It has to do with the width and margins set to input and label. If you remove the margins, you'll notice that the checkboxes begin to line up. Since label and input are shared and there are tons of CSS strings pointing to to those elements... you may want to just go ahead and be more specific on the CSS targeting and isolate them to manipulate their positioning better.

EDIT:
Good enough Vera? XD

**Vera** · 02/18/2011, 13:58

I'll give you half the points :D The margin's don't need to change. It's the widths and two other important part that you didn't name yet

Although usually I would like people to figure it out themselves using some hints here is an almost complete possible answer:

Code:

#contact_us_form #lbl_23_0,
#contact_us_form #lbl_23_1,
#contact_us_form #lbl_23_2 {
width: auto;
display: inline;
float: none;
}

#contact_us_form #opt_23_0,
#contact_us_form #opt_23_1,
#contact_us_form #opt_23_2 {
width: auto;
}

It misses the left margin, but the ts will see that when trying. Perhaps there are other solutions as well, but they all need to change the display, width and possibly the float. :?