Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to spread 3 checkboxes evenly across form

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #46397
    bbilander
    Participant

    Hi,
    I’m having some difficulty creating a 3-column checkbox questionnaire thing at the top of my contact form. I’ve wrapped each label/checkbox with a div and tried to use floats to space them evenly across the form but the text keeps dropping down to the next line. [Here’s a link to the problem](http://cdpn.io/vsLng “codepen”). Any help people? Also, not quite sure how to fix the vertical alignment of the left-aligned text with the white input space. Love your thoughts!
    Thanks in advance.
    B

    #142749
    Paulie_D
    Member

    For one thing your inputs are to wide…

    input {
    width: 470px;
    }

    …is not overridden for checkboxes

    #142750
    Paulie_D
    Member

    For another you might try switching the order of the input and label in the HTML

    #142751
    georgearnall
    Participant

    Something like [this](http://cdpn.io/bHwKFhttp://cdpn.io/bHwKF”) ?

    #142752
    Paulie_D
    Member

    No…I meant like this


    #142753
    georgearnall
    Participant

    @Paulie_D No, I mean’t I had a solution. I tested your solution and it doesn’t seem to work ? (including the input width)

    For my solution, I used `inline-block` instead of floats. Instead of sifting through the code I just put in the necessary resets of rules.

    #142820
    bbilander
    Participant

    Hi georgearnall,

    Thanks for your posts. I also thought to use inline-block but then the alignment goes awry. What I want is for the three checkboxes to be spread _evenly_ across the page. So that the first checkbox (and label) are left aligned, the second is dead center and the third is hard right. Visually that seems to be the best layout. If I float three divs with text I can get them to look exactly right, but when I wrap the label/checkbox combo the two don’t fit on the same line.. Any more suggestions? what am I doing wrong?

    #142927
    Paulie_D
    Member

    Perhaps you could show us how these checkboxes and labels are **supposed** to look in an image instead of us guessing from a description.

    It would be very helpful.

    #142935
    Paulie_D
    Member

    Hacky but at least I have the boxes in the right place : http://codepen.io/Paulie-D/pen/HDEJw

    Not sure how you can have a checkbox in the **exact** center or the page **and** a label without it looking pretty lop-sided.

    #142938
    georgearnall
    Participant

    @bbilander So you mean like [this](http://cdpn.io/HFuCbhttp://cdpn.io/HFuCb”) ?

    I think this is as simple as you could make it.

    #142939
    Paulie_D
    Member

    Slighty better. http://codepen.io/Paulie-D/pen/axhsm

    The top one uses inline-block but requires a change in the source order for checkbox-3

    The bottom one is in the correct source order but the floats mean that some tweaks would have to be made in the positioning.

    #142959
    bbilander
    Participant

    Thanks Pauli_D and georgearnall for helping out. The checkboxes need to stay left of the label so the inline-block solution that georgearnall has suggested looks perfect. I’ll give it a go in my design shortly and let you know how it goes.
    CHeers!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.