[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 603
  • Last Modified:

CSS help with group of checkboxes

layout
I am trying to layout part of a form like the image above.  I have tried various methods but
cannot get it quite right.  I would like to do it with css instead of a table if possible.

Any help would be appreciated.

Thanks  
0
Ross-C
Asked:
Ross-C
  • 2
  • 2
1 Solution
 
SSupremeCommented:
You can have a look at this example, but I strongly recommend to use table in this case.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Running Profiles - Home Page -</title>
<style type="text/css">
input {margin:5px;}
</style>
</head>
<body>
<form>
<div style="width:80px; float:left;" >
<p style="font-size:15px; margin:20px 0 0;">Breakfast</p>
<p style="font-size:15px; margin:5px 0 0;">Teatime</p>
<p style="font-size:15px; margin:5px 0 0;">Full Day</p>
</div>
<div style="width:140px; float:left;" >
<p style="font-size:15px; margin:0px;">Mon Tue Wed Thu Fri</p>
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
</div> 
</form> 
</body>
</html>

Open in new window

0
 
Chad HaneyChief Technology OfficerCommented:
This should look how you want it.
<html>
<head>
<style type="text/css">
	p{
		margin:0px;
		padding:0px;
	}
	.form{
		border:1px solid #000000;
		clear:both;
		float:left;
	}
	.form>.header{
		margin-left:60px;
		float:left
		clear:both;
	}
	.form>.header>p{
		width:35px;
		float:left;
	}
	.form>.data, .form>.data>.row{
		clear:both;
	}
	.form>.data>.row>p{
		width:35px;
		float:left;
		text-align:center;
	}
	.form>.data>.row>.rowTitle{
		width:60px;
		text-align:left;
	}
</style>
<body>
	<div class="form">
		<div class="header">
			<p>Mon</p>
			<p>Tue</p>
			<p>Wed</p>
			<p>Thu</p>
			<p>Fri</p>
		</div>
		<div class="data">
			<div class="row">
				<p class="rowTitle">Breakfast</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</div>
			<div class="row">
				<p class="rowTitle">Teatime</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</div>
			<div class="row">
				<p class="rowTitle">Full Day</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
 
Ross-CAuthor Commented:
Works great i replaced the > characters for spaces in the style section think something must have gone wrong with the paste.

Many thanks
0
 
Chad HaneyChief Technology OfficerCommented:
The > chars were there intentionally, but not necessary in this example.  Used for precision to indicate to only modify elements that are immediately followed as children.
0
 
Ross-CAuthor Commented:
Ah ok sorry I misunderstood, thanks
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now