CODEWITHSUNDEEP
csscheckbox
SeanWM
SeanWM

Reputation: 16989

CSS Layout with checkboxes

I'm having an issue with my layout when I want to add checkboxes.

CSS:

p label {
    vertical-align: middle;
    width: 100px;
    display: inline-block;
    /*display: block;
    padding-top: 8px;
    float: left;*/
}

HTML:

<p>
    <label for="a">a:</label>
    <select name="a" id="a" class="select">
        <option value="">Choose</option>
    </select>
</p>
<p>
    <label for="s">s:</label>
    <select name="s" id="s" class="select">
        <option value="">Choose</option>
    </select>
</p>
<p>
    <label for="d">d:</label>
    <input id="1" type="checkbox" name="looking_for[]" value="1" />
    <label class="no_float" for="1">Friends</label>
    <input id="2" type="checkbox" name="looking_for[]" value="2" />
    <label for="2">Friends</label>
</p>

I'm wanting it to look something like

http://media.smashingmagazine.com/images/web-form-design-patterns/labels-small.jpg

I've added a jsfiddle for convenience.

Upvotes: 0

Views: 420

Answers (4)

Praveen Dabral
Praveen Dabral

Reputation: 2509

This will work fine for you

a: Choose

s: Choose

d:

<input id="first" type="checkbox" name="looking_for[]" value="1" />Friends<br />

<input id="second" type="checkbox" name="looking_for[]" value="2" />Friends<br />

</p>

And the css goes like this

p label {
vertical-align: middle;
width: 100px;
display: inline-block;}

#second{margin-left:108px;}

/*display: block;
padding-top: 8px;
float: left;*/
}

Upvotes: 0

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

Maybe this is what you meant,

http://jsfiddle.net/3LW8D/3/

use container div.

and yeah even though the answer given by "user1823799" looks strikingly similar, there is a considerable difference in approach, the paragraph tag is messed in his example, so I just reinvented the wheel.

and coming back to your problem, always make a container div with a specific size, make sure that its positioned correctly in the place you want your elements located, if position isn't correct, then you could use margin/position property to fix it, then nest your small elements in this container div.

Upvotes: 0

Praveen Dabral
Praveen Dabral

Reputation: 2509

You have used "id=1 and id=2" for your checkboxes. This can be one reason since numbers don't work for id's. Try to give a meaningful name, some character or string.

Upvotes: 1

user1823799
user1823799

Reputation: 120

Are you looking for something like this? http://jsfiddle.net/3LW8D/1/ Might be done with less divs and more css but since the image link doesn't work i'am just guessing what you are lookign for. ;)

Upvotes: 0

Related Questions