I am trying to set two columns inside a main content column. I have the two lists seperated into columns, I just want to reduce the amount of space between them, creating more of a centered look. Could someone look at my code and see what I’m doing wrong? Thanks so much.
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>University Neuromuscular Massage</title>
<link href="newMain.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".slideshow").cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div class="container">
<div class="sidebar1">
<img src="_images/UNM_logo.jpg" width=100% alt="University Neuromuscular Massage">
<ul class="nav">
<li><a href="new_index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="therapists.html">Meet Our Therapists</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">Frequently Asked Questions</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<div class="slideshow">
<img src="_images/calfCramp.jpg" width="250" height="250">
<img src="_images/backPainSkeleton.jpg" width="250px" height="250px">
<img src="_images/chronicPainSign.jpg" width="250px" height="250px">
<img src="_images/neckShoulderPain.jpg" width="250px" height="250px">
</div>
<p>The main focus here at University Neuromuscular Massage is to help our clients achieve their pain relief goals. All of our therapists are Licensed Massage and Bodywork Therapists in the state of North Carolina, as well as being trained in neuromuscular therapy. This specific approach to the body allows us to tailor each massage to each person's specific needs. Assessing posture and gait (walking process) allows us to target specific muscles and connective tissue that are pulling you out of balance. Once the body is back in balance, your weight is placed back onto your bones instead of forcing your muscles to do all the work of holding you upright.</p>
<p>Neuromuscular Therapy is a safe, non-invasive treatment for a wide range of issues and symptoms. The symptoms our clients suffered from are reduced in intensity, frequency and duration. Some ailments that are helped by NMT include:</p>
<div class="painList">
<ul class="fltlft">
<li>Arthritis</li>
<li>Athletic Injuries</li>
<li>Back Pain</li>
<li>Bursitis</li>
<li>Fibromyalgia</li>
<li>Frozen Shoulder</li>
</ul>
<ul class="fltrt">
<li>Hip or Knee Pain</li>
<li>Sprains/Strains</li>
<li>Neck and Shoulder Pain</li>
<li>Tennis/Golfer Elbow</li>
<li>Tendonitis</li>
<li>Headaches</li>
</ul>
</div><!-- end painList -->
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
and CSS:
@charset "utf-8";
html, body{height:100%;}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin: 0;
padding: 0;
color: #000;
}
p {
text-align:justify;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
display: table;
width: 80%;
height: 100%;
max-width: 1260px;
min-width: 780px;
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
display: table-cell;
width: 25%;
vertical-align:top;
background-color: #005BAA;
min-height: 100%;
padding-top: 20px;
}
.content {
display:table-cell;
vertical-align:top;
padding: 10px 0;
width: 80%;
}
.painList {
margin= 0 auto;
width= 65%;
}
img#logo {
display: block;
margin:0 auto;
padding-bottom: 15px;
padding-top: 15px;
}
div.slideshow {
width: 400px;
display:block;
margin: 0 auto;
}
img.slideshow {
width: 100%;
}
#tagline {
text-align: center;
font-family: Verdana, Geneva, sans-serif;
color: #A10C10;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background-color: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #FFFFFF;
color: #005BAA;
font-weight: bold;
}
/* ~~miscellaneous float/clear classes~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
