One can use the list-style-position: outside; attribute to make subsequent lines of text following a bullet left align to the first line of text. Is there a way to do the same thing with checkboxes? I have a list of 7 items, each preceeded by a checkbox. I want subsequent lines of text to left align with the line one text, not the left edge of the checkbox. Does that make sense? Can it be done?This the idea?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Align checkbox text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.container {clear:both;margin:1em 0;}
.container input, .container div {float:left;}
-->
</style>
</head>
<body>
<div class="container">
<input id="box1" type="checkbox" />
<div>
<label for="box1">checkbox1 text</label>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</p>
</div>
</div>
<div class="container">
<input id="box2" type="checkbox" />
<div>
<label for="box2">checkbox2 text</label>
<p>Nullam interdum wisi quis augue mattis dapibus. Quisque non diam vel felis tempus gravida.</p>
</div>
</div>
<div class="container"></div>
</body>
</html>Exactly. Is there a way to increase a bit the amount of space between the checkbox and the label? They appear a bit too bunched for my taste.Add to css:
.container input {margin-right:1em;}Ahhh. Very nice. Thanks for the assist.I am encountering the same problem.
While Fang's solution works, it floats both checkbox and its description text. It makes the containing div empty and has 0 height. The containing div does not stretch down to contain the checkbox and the text.
I have tried 2 solutions, neither ideal. Is there any other better way to do this?
Method 1:
<style>
#mycheckbox {
float:left;
}
.checkboxdes {
display:block;
margin-left: 20px;
}
</style>
<input id="mycheckbox" type="checkbox" />
<label class="checkboxdes" for="mycheckbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
Method 2:
<style>
#mycheckbox {
float:left;
}
.checkboxdes {
width: 95%;
display:block;
float:left;
}
</style>
<input id="mycheckbox" type="checkbox" />
<label class="checkboxdes" for="mycheckbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
<br clear="all" />
About Method 1: Everything seems to work well except that in IE, because of the extra padding around the checkbox, the first line of the description text indents more than the rest of the lines.
About Method 2: When I float both checkbox and its label, first line aligns perfectly in IE. But in order for it to work in Firefox, I have to define a width to the label. Also, I have to clear the float with an extra HTML element.
Method 1 is better in that content and presentation are seperated better than method 2. No meaningless HTML in method 1. But IE isn't cooperating. :/
Anyone has any idea how to do this?
How is everyone coding checkboxes?
And no, I refuse to use table.
Found the magic number that works for IE.
In Method 1, set the checkbox's margin-right: -12px. It fixes the display problem. It works in FF. I still need to test it in other browsers.Not valid but representative of an approach.
label { display:block; margin-left: 2em }
input { display:block; float:left }
fieldset { width: 20em }
</style>
</head>
<body>
<form>
<fieldset>
<input type="checkbox"><label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
<input type="checkbox"><label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
<input type="checkbox"><label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
</fieldset>
</form>
</body>
</html>Is there any reason why checkboxes have to be declared as a block element?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Align checkbox text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.container {clear:both;margin:1em 0;}
.container input, .container div {float:left;}
-->
</style>
</head>
<body>
<div class="container">
<input id="box1" type="checkbox" />
<div>
<label for="box1">checkbox1 text</label>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</p>
</div>
</div>
<div class="container">
<input id="box2" type="checkbox" />
<div>
<label for="box2">checkbox2 text</label>
<p>Nullam interdum wisi quis augue mattis dapibus. Quisque non diam vel felis tempus gravida.</p>
</div>
</div>
<div class="container"></div>
</body>
</html>Exactly. Is there a way to increase a bit the amount of space between the checkbox and the label? They appear a bit too bunched for my taste.Add to css:
.container input {margin-right:1em;}Ahhh. Very nice. Thanks for the assist.I am encountering the same problem.
While Fang's solution works, it floats both checkbox and its description text. It makes the containing div empty and has 0 height. The containing div does not stretch down to contain the checkbox and the text.
I have tried 2 solutions, neither ideal. Is there any other better way to do this?
Method 1:
<style>
#mycheckbox {
float:left;
}
.checkboxdes {
display:block;
margin-left: 20px;
}
</style>
<input id="mycheckbox" type="checkbox" />
<label class="checkboxdes" for="mycheckbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
Method 2:
<style>
#mycheckbox {
float:left;
}
.checkboxdes {
width: 95%;
display:block;
float:left;
}
</style>
<input id="mycheckbox" type="checkbox" />
<label class="checkboxdes" for="mycheckbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
<br clear="all" />
About Method 1: Everything seems to work well except that in IE, because of the extra padding around the checkbox, the first line of the description text indents more than the rest of the lines.
About Method 2: When I float both checkbox and its label, first line aligns perfectly in IE. But in order for it to work in Firefox, I have to define a width to the label. Also, I have to clear the float with an extra HTML element.
Method 1 is better in that content and presentation are seperated better than method 2. No meaningless HTML in method 1. But IE isn't cooperating. :/
Anyone has any idea how to do this?
How is everyone coding checkboxes?
And no, I refuse to use table.
Found the magic number that works for IE.In Method 1, set the checkbox's margin-right: -12px. It fixes the display problem. It works in FF. I still need to test it in other browsers.Not valid but representative of an approach.
label { display:block; margin-left: 2em }
input { display:block; float:left }
fieldset { width: 20em }
</style>
</head>
<body>
<form>
<fieldset>
<input type="checkbox"><label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
<input type="checkbox"><label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
<input type="checkbox"><label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sed sapien.</label>
</fieldset>
</form>
</body>
</html>Is there any reason why checkboxes have to be declared as a block element?