esfand/index.cfm

## index.cfm
<html>

    <head>
        <link href="index.css" rel="stylesheet" />
    </head>
    <body>

        <cfquery
            name="statesQuery"
            datasource="census"
            cachedwithin="#createTimespan(365,0,0,0)#">
            select distinct stusab
            from geo_header
            order by stusab asc
        </cfquery>

        <div id="menu">
            <ul>
                <cfoutput query="statesQuery">
                    <li><a href="index.cfm?state=#stusab#">#stusab#</a></li>
                </cfoutput>
            </ul>
        </div>


        <div id="content">

            <cfparam
                name = "state"
                default = ""
                type = "string" />

            <cfif state EQ "">

                <h1>Please select a state</h1>

            <cfelse>

                <h1>Counties for <cfoutput>#state#</cfoutput>:</h1>

                <cfquery name="counties" datasource="census"
                         cachedwithin="#createTimespan(365,0,0,0)#">
                    select stusab, logrecno, county, name, intptlat, intptlon, pop100
                    from geo_header
                    where stusab = <cfqueryparam cfsqltype="CF_SQL_CHAR" value="#state#"/> and county is not null and sumlev = 50
                    order by name
                </cfquery>

                <div class="table">

                    <div class="header">
                        <div>Name</div>
                        <div>County</div>
                        <div>Record Number</div>
                        <div>Interpolated Latitude</div>
                        <div>Interpolated Longitude</div>
                        <div>Population</div>
                    </div>

                    <cfoutput query="counties">
                        <div>
                            <div>#name#</div>
                            <div>#county#</div>
                            <div>#logrecno#</div>
                            <div>#intptlat#</div>
                            <div>#intptlon#</div>
                            <div>#pop100#</div>
                        </div>
                    </cfoutput>
                </div>
            </cfif>

        </div>
    </body>
</html>

## index.css

body {
    margin:0px;
    padding:0px;
}

#menu {
    position:absolute;
    left:0px;
    top:0xp;
    width: 200px;
    background:#ddd;
    margin:0px;
    padding:0px;
}
#content {
    position:absolute;
    left:200px;
    top:0xp;
    right:0px;
    padding:10px;
}

.table {
    display:table;
    width:100%;
}
.table>div {
    display:table-row;
}
.table>div>div {
    display:table-cell;
    padding:4px;
}


H1 {
    margin-top:0px;
}

.table>div:nth-child(2n) {
  background: #EEE;
}

.header {
    font-weight:bold;
    color:white;
    background:#555;
}
	<html>

	<head>
	<link href="index.css" rel="stylesheet" />
	</head>
	<body>

	<cfquery
	name="statesQuery"
	datasource="census"
	cachedwithin="#createTimespan(365,0,0,0)#">
	select distinct stusab
	from geo_header
	order by stusab asc
	</cfquery>

	<div id="menu">
	<ul>
	<cfoutput query="statesQuery">
	<li><a href="index.cfm?state=#stusab#">#stusab#</a></li>
	</cfoutput>
	</ul>
	</div>


	<div id="content">

	<cfparam
	name = "state"
	default = ""
	type = "string" />

	<cfif state EQ "">

	<h1>Please select a state</h1>

	<cfelse>

	<h1>Counties for <cfoutput>#state#</cfoutput>:</h1>

	<cfquery name="counties" datasource="census"
	cachedwithin="#createTimespan(365,0,0,0)#">
	select stusab, logrecno, county, name, intptlat, intptlon, pop100
	from geo_header
	where stusab = <cfqueryparam cfsqltype="CF_SQL_CHAR" value="#state#"/> and county is not null and sumlev = 50
	order by name
	</cfquery>

	<div class="table">

	<div class="header">
	<div>Name</div>
	<div>County</div>
	<div>Record Number</div>
	<div>Interpolated Latitude</div>
	<div>Interpolated Longitude</div>
	<div>Population</div>
	</div>

	<cfoutput query="counties">
	<div>
	<div>#name#</div>
	<div>#county#</div>
	<div>#logrecno#</div>
	<div>#intptlat#</div>
	<div>#intptlon#</div>
	<div>#pop100#</div>
	</div>
	</cfoutput>
	</div>
	</cfif>

	</div>
	</body>
	</html>

	body {
	margin:0px;
	padding:0px;
	}

	#menu {
	position:absolute;
	left:0px;
	top:0xp;
	width: 200px;
	background:#ddd;
	margin:0px;
	padding:0px;
	}
	#content {
	position:absolute;
	left:200px;
	top:0xp;
	right:0px;
	padding:10px;
	}

	.table {
	display:table;
	width:100%;
	}
	.table>div {
	display:table-row;
	}
	.table>div>div {
	display:table-cell;
	padding:4px;
	}


	H1 {
	margin-top:0px;
	}

	.table>div:nth-child(2n) {
	background: #EEE;
	}

	.header {
	font-weight:bold;
	color:white;
	background:#555;
	}