Help with CSS Please

Hi,
I can get the three areas in container division to line up with the picture on top exactly. It seems I have a padding on the right in each of the three areas (side-a, side-b, content) but I don't know why. Or maybe something else. It's probably simple but it has been a while since I dabbled in this area and just can't figure it out. I will much appreciate the help. Here's are the html/css codes.

css:


@charset "UTF-8";
/* CSS Document */

ul, li, html, a
{
margin:0; padding:0;
}

body
{
text-align: center;
margin: 0 auto;
padding: 0;
font: 65% arial, sans-serif;
}

p {
color: #666;
text-align: justify;
padding: 0px;
width: 250px;
}

p img {
border: 1px double #999;
}

li
{
list-style-type:none;
}

a
{
text-decoration: none;
color: #3f6fb1;
}


#wrapper {
text-align: center;
margin: 0px;
padding: 0px;
border-left:solid #cedf93;
border-right:solid #cedf93;
width: 941px;
}

#topleft {
float: left;
margin: 0 0 0px 0;
}

#topright {
position:relative;
margin-top:0;
float: right;
}


#header {
margin: 0 0 0px 0;
}

#container
{
margin: 0;
}
#side-a {
float: left;
width: 300px;
padding: 0px 10px;
border:solid #000;
padding-left: 0px;
padding-right: 0px;
}

#side-b {
float: right;
width: 300px;
padding: 0px 10px;
border:solid #000;
padding-right: 0px;
}

#content {
float: left;
width: 300px;
padding: 0px 10px;
border:solid #000;
padding-right: 0px;
}


#footer {
clear: both;
background: #ffffff;
}

/*navigation menu*/

ul#nav
{
width: 100%;
height: 3em;
margin: 1em auto 0;
margin-top:0;
font-size: 1.3em;
}

ul#nav li
{
position: relative;
float: right;
width: 10em;
height: 3em;
line-height: 3em;
background-color: #ffffff;
border-right: 2px solid #abc936;
border-bottom: 2px solid #white;
}

ul#nav li.noBorder
{
border-right: none;
}

ul#nav li:hover {
border-top: 4px solid #CCC;
}

ul#nav li a {
display: block;
float: left;
width: 100%;
}

ul#nav li ul
{
display: none;
}

ul#nav li:hover ul
{
background-color: #F00;
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding:0;
text-align: left;
font-size: 1em;
}

ul#nav li:hover ul li
{
width: 100%;
height: 2em;
background-color: #cedf93;
border: none;
border-bottom: 2px solid #white;
overflow:hidden;
}

ul#nav li:hover ul li a
{
display: block;
margin: 0; padding: 0 0 0 .3em;
height: 100%;
line-height: 2em;
}


ul#nav li:hover ul li a:hover
{
background-color: #3f6fb1;
text-decoration: none;
color: #ffffff;
}

/*end of navigation*/

html:


<!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>Untitled Document</title>
<link href="medev1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
 <div id="topleft">
 <img src="images/medevlogo.jpg" width="160" height="70" alt="Care Technology" />
 </div>
 <div id="topright">
 <ul id="nav">
<li><a href="#">Home</a></li>
 <li><a href="#">Products & Services</a>
 <ul>
 <li><a href="#">Respiratory Care</a></li>
 <li><a href="#">Sleep Disorders</a></li>
 <li><a href="#">Cardiology</a></li>
 <li class="noBorder"><a href="#">IT Solutions</a></li>
 </ul>
 </li>
 <li><a href="#">Our Work</a>
 <li><a href="#">Our Company</a>
 </li>
 <li><a href="#">Contact Us</a></li>
</ul>
 </div>

 <div id="header">
 <br />
 <img src="images/seniors.jpg" width="901" height="400" />
</div>
<div id="container">
<div id="side-a">
 <p><img src="images/sleepwoman.jpg" width="250" height="140" alt="medev sleep" /></p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
</div>

<div id="content">
 <p><img src="images/sleepwoman.jpg" width="250" height="140" alt="medev sleep" /></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>

</div>

<div id="side-b">
 <p><img src="images/sleepwoman.jpg" width="250" height="140" alt="medev sleep" /></p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>

</div>
</div>
<div id="footer">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>FOOTER </p>
</div>
</div>
</body>
</html>

[edited by: alt131 at 4:49 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy [/edit]

Help with CSS Please

help with css

mirozake

webprutser

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week