Checkbox layout issue

HTML & CSS
1

Hi there,

I’m designing a site which has a number of checkboxes on one page. To save on vertical space I have them in three columns.

Each checkbox is in div floated left, and has a margin of 6px. Each label is set to display:inline-block, and has a defined width. I’m really happy with the layout, except for one niggling thing: there’s one label that takes up two lines. Now, rather than the checkbox sitting at the top of the div, it sits at the bottom, inline with the bassline of the second line of text.

I have tried numerous things to move it to the top of the div, but it won’t budge. Not even with dirty negative margin antics.

I’ve attached an image so you can see what I mean.

Here’s my css:


fieldset div{
  float:left;
  width:260px;
  padding-right:10px;
}

fieldset div label{
  display:inline-block;
  width:220px;
}

.sessions{
  margin:6px;
  display:inline-block;
}

Here’s the HTML:


<fieldset>
    <legend>Sessions:</legend>
    [COLOR="Silver"]<?php foreach ($sessions as $session): ?>[/COLOR]
      <div>
          <input class="sessions" type="checkbox" name="sessions[]" id="session[COLOR="silver"]<?php htmlout($session['id']) ?>[/COLOR]" value="[COLOR="silver"]<?php htmlout($session['id']); ?>[/COLOR]"
          [COLOR="silver"]<?php if ($session['selected'])
          {
            echo ' checked="checked"';
          }?> />[/COLOR]
          <label for="session[COLOR="silver"]<?php htmlout($session['id']); ?>[/COLOR]">[COLOR="silver"]<?php htmlout($session['title']); ?>[/COLOR]</label>
      </div>
    [COLOR="silver"]<?php endforeach; ?>[/COLOR]
  </fieldset>

I’ve just faded-out the php commands so that it’s a bit so it’s easier to read.

One more thing to add: ideally any solution can be applied to ALL the labels and checkboxes, rather than a set of commands for that particular checkbox.

Thanks in advance for you input.

2

HI,

I’d do something like this.


<form action="">
    <fieldset>
    <legend>Sessions:</legend>
    <div class="test">
        <input class="sessions" type="checkbox" name="test" id="test" >
        <label for="test">This is some text</label>
        <input class="sessions" type="checkbox" name="test2" id="test2" >
        <label for="test2">This is some text</label>
        <input class="sessions" type="checkbox" name="test3" id="test3" >
        <label for="test3">This is some text that runs to two line</label>
        <input class="sessions" type="checkbox" name="test4" id="test4" >
        <label for="test4">This is some text</label>
    </div>
    </fieldset>
</form>




fieldset div {
    float:left;
    width:260px;
    padding-right:10px;
}
fieldset div label {
    display:inline-block;
    width:220px;
  [B]  margin:3px 0 0;[/B]
}
.sessions {
  [B]  margin:6px;[/B]
    display:inline-block;
}
[B].test input,.test label {
    vertical-align:top;
    line-height:1.2;
    padding:0;/* for ie*/
}[/B]

That seems to render as close as can be expected cross browser.

3

Looks to me that the label width is not enough to hold the text

4

@Paul O’B - Brilliant mate, thank you, works a charm, exactly as I wanted. :slight_smile:

@donboe - the width of the label is set like that so I can get three columns of checkboxes across the width of my page. That’s why the text forms two lines, and the purpose of the post.

Cheers,
Mike