Skip to content

Instantly share code, notes, and snippets.

@geoffgarside

geoffgarside/test.css

Created July 23, 2008 15:59
Show Gist options
  • Save geoffgarside/1794 to your computer and use it in GitHub Desktop.
Save geoffgarside/1794 to your computer and use it in GitHub Desktop.
Download ZIP
Trying to get a columnar list with CSS
Raw
test.css
form label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
width: 11em; }
form label.required:after {
content: "*";
color: red; }
form fieldset {
margin-bottom: 10px;
border: none; }
form fieldset legend {
padding: 0 0.4em 0.2em 0;
font-weight: bold; }
form fieldset ol {
margin: 0;
padding: 0; }
/* This is the part I need help with */
/* Switched to floats, thanks Tom */
form fieldset ol.columned li {
float: left;
}
form fieldset ol.columned li label {
width: 6em;
}
/* This works in Opera and Safari */
form fieldset ol.columned li:nth-child(3n+1) {
clear: left;
padding-right: 0;
}
form fieldset ol.columned li:last-child {
clear: left;
}
form fieldset ol.columned li:last-child label {
width: 11em;
text-align: left;
}
/* End area need help with */
form fieldset ol li {
list-style: none;
padding: 5px;
margin: 0; }
form input {
font-size: 1em;
padding: 0.2em; }
form input[type=text], form input[type=password], form input[type=checkbox] {
border: 1px solid #555555; }
form input[type=radio] {
vertical-align: top; }
Raw
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Form Test</title>
<link href="test.css" type="text/css" />
</head>
<body>
<form action="#" method="get">
<fieldset>
<legend>Type of Animal</legend>
<ol class='columned'>
<li>
<label for="animal_anteater">Anteater</label>
<input id="animal_anteater" name="animal" type="radio" value="anteater" />
</li>
<li>
<label for="animal_cat">Cat</label>
<input id="animal_cat" name="animal" type="radio" value="cat" />
</li>
<li>
<label for="animal_dog">Dog</label>
<input id="animal_dog" name="animal" type="radio" value="dog" />
</li>
<li>
<label for="animal_emu">Emu</label>
<input id="animal_emu" name="animal" type="radio" value="emu" />
</li>
<li>
<label for="animal_gecko">Gecko</label>
<input id="animal_gecko" name="animal" type="radio" value="gecko" />
</li>
<li>
<label for="animal_rabbit">Rabbit</label>
<input id="animal_rabbit" name="animal" type="radio" value="rabbit" />
</li>
<li>
<label for="animal_ram">Ram</label>
<input id="animal_ram" name="animal" type="radio" value="ram" />
</li>
<li>
<label for="animal_salamander">Salamander</label>
<input id="animal_salamander" name="animal" type="radio" value="salamander" />
</li>
<li>
<label for="animal">Not listed?</label>
<input id="animal" name="animal" size="10" type="text" />
</li>
</ol>
</fieldset>
<p>
<input type="submit" name="commit" value="Save" id="commit"/>
</p>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment