I' cant for the life of me figure out why the div "book_button" won't display at the bottom of the page, above the footer. I have a main wrapper div, and then there is a content div. I've placed the book_button in a relative position outside the content div. In the dream weaver design window it's showing it where I want it to be. When I view it in a browser it diplays like so
http://kerrydean.ca/GreyRiver/fly_fishing.html
here is the css
#Wrapper {
margin-top:0;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #ebebeb;
padding: 0px;
width: 100%;
top: 75px;
}
#Header {
background-color: #b2b85c;
height: 75px;
width: 100%;
position: fixed;
top: 0px;
overflow: hidden;
z-index: 999;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#Content {
width: 900px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#Left_Side {
padding: 10px;
width: 485px;
clear: left;
float: left;
}
#Right_Side {
width: 340px;
position: relative;
display: inline;
float: right;
margin-left: 20px;
margin-bottom: 10px;
padding-left: 35px;
height: 100%;
}
#Footer {
background-color: #BCC271;
height: 15px;
width: 100%;
text-align: center;
padding-top: 15px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
float: left;
position: relative;
}
/* Navigation*/
.nav-wrap {
position: relative;
margin-right: auto;
margin-left: auto;
width: 900px;
padding-left: 15px;
padding-top: 31px;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 20px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #FFF;
}
#navlist a:hover
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
background-image: url(../GreyRiver/Images/pointer.jpg);
background-repeat: no-repeat;
background-position: 50% bottom;
}
.border-none{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/*End of Navigation*/
#header_img{
height: 250px;
width: 900px;
position: relative;
background-image: url(../GreyRiver/Images/Fly_fishing_header.jpg);
margin-top: 10px;
margin-bottom: 25px;
}
#book_button{
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
}
I figured it out.
I put the book_button div right before the footer. I made the width 100%, position:relative and add a float:left
thanks anyway!
1) Make #Wrapper position:relative
2) make #book_button position:absolute, set bottom:40px;right:200px;
This probably isn't best practice, but you could use the top style property to push the button down where you want it. It looks like the content of your page is static, meaning that button isn't going to need to position itself dynamically each time the page loads. So, a hard coded value to position it may work for you.
I took your current view source and just changed the #book_button back to relative and it displays in between the footer and the content. Change that back to relative as absolute will not work.
Related
So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}
I'm not really a champ when it comes to CSS, so I was hoping I could get some assistance.
Right now I got one parent div with two child divs. Currently, whenever I resize the browser, the two divs overlap each other. I want the left div to be visible at all times.
It can be viewed in action over here: http://unlimitedbrettworks.com/forums/
CSS:
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
height: 122px; /* is value is the height min the padding you use.*/
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
That is the first problem. The second is on line 128 in your css file.
div#wrapper
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
border: 10px solid #333333;
}
Needed to be:
div#wrapper
{
margin: 0 auto;
min-width: 1024px;
max-width: 2300px;
border: 10px solid #333333;
}
I went to your site, and played with Chrome's inspector, and found an answer.
Try adding these properties to #userarea:
#userarea {
position: absolute;
background-color: #E1E1E1;
height: 100%;
}
Hope this helps
Sorry, I didn't get your question... in the page you linked the #userarea div is always visible even if you resize the window.
To see the #logo div entirely, remove the 'height ' attribute from the parent div #header and it will go on a new line if the window is not large enough.
I just tested my new site with my android phone and I am not able to scroll anywhere on the page. On Firefox, opera, ie, and chrome desktop browsers I get vertical scroll when needed. In my html, body css rule I've got overflow-y to scroll; Width should not be scrolled. I'm probably missing something simple here but I've never come across this in any other sites I've done.
Here's my css for the site:
#charset "utf-8";
/* CSS Document */
#body{
min-width: 900px;
width: 75%;
background-size: cover;
background-image: url(../graphics/back2.jpg);
position: relative;
margin: 40px auto;
padding: 10px;
border-style: groove;
border-width: 5px;
border-color: #000;
background-repeat: repeat-y;
}
a:link, a:visited, a:active{
text-decoration: none;
color: inherit;
}
a:hover{
color: #FFF;
text-decoration: underline;
}
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background-image: url(../graphics/craig-smith-background.jpg);
line-height: 25px;
}
h1{
font-size: 36px;
font-family: "Times New Roman", Times, serif;
color: #000;
margin: 10px;
}
h2{
font-size: 30px;
font-family:"Times New Roman", Times, serif;
margin-left: 30px;
color: #333;
font-weight: 700;
margin: 20px;
}
h3{
font-size: 24px;
margin: 10px;
}
p{
font-size: 20px;
font-family: "Times New Roman", Times, serif;
color: #FFF;
text-indent: 1.5em;
margin-left: 1.5em;
}
#quote{
margin-left: 30px;
font-style: italic;
font-family: lucida;
font-size: 18px;
border-style: inset;
border-color: #333;
border-width: 2px;
height: 80px;
}
#header{
width: auto;
margin: 0 auto;
position: relative;
text-align: center;
}
#nav{
position: absolute;
z-index: 1;
left: 25%;
top: 150px;
}
.picture{
display: inline-block;
position: relative;
margin: 0 auto;
border-style: groove;
border-width: 5px;
border-color: #999;
}
.clear-left{
clear: left;
position: relative;
}
.clear-right{
clear: right;
position: relative;
}
.clear-all{
clear: both;
position: relative;
}
#left-col{
width: 25%;
min-width: 300px;
position: relative;
float: left;
text-wrap: normal;
overflow: hidden;
margin-bottom: 10px;
margin-top: 10px;
text-align: right;
}
#right-col{
min-height: 500px;
min-width: 500px;
width: 65%;
text-align: left;
float: right;
border-style: groove;
border-width: 5px;
border-color: #CCC;
margin-bottom: 10px;
margin-top: 10px;
text-wrap: normal;
text-indent: 10px;
}
#footer{
width: 85%;
height: 40px;
background-color: #999;
text-align: center;
margin: 10px auto;
padding: 0px;
padding-bottom: 10px;
border-style: groove;
border-width: 2px;
border-color: #999;
}
#project-description h1{
text-align: center;
font-size: 36px;
}
.project-description h2{
color: #333;
font-weight: bold;
}
.project-description{
border-style: inset;
border-width: 3px;
border-color: #333;
margin: 10px;
padding: 5px;
}
.project-description p{
margin-left: 70px;
text-indent: 0;
}
table{
border-spacing: 0;
border-collapse: collapse;
}
td, th, tr{
padding: 0;
line-height: 20px;
}
And here's a link the live site.
You don't need to give the body and html tags the overflow-y: scroll; style. That is resulting in a double scrollbar which is failing in mobile browsers. You don't even need to specify that as it is default behavior. You may want to set overflow-y: scroll; and overflow-x: hidden; on the body tag only.
My navigation looks fine in Chrome but in Firefox and IE, the list items appear below (about 15 pixels below) the nav container div. Can someone please help me?
Here is the link: http://jwstudio.us/bkpa/
The CSS:
nav {
position: relative;
background-image: none;
background-repeat: no-repeat;
float: left;
background-color: #DBD0CA;
z-index: 3;
margin-top: -115px;
margin-left: -2px;
height: 29px;
width: 945px;
margin-right: 10px;
background-position: left;
}
nav ul {
position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;
}
nav ul li a {
position: relative;
height: 27px;
float: left;
z-index: 5;
text-align: left;
padding-left: 11px;
list-style-type: none;
text-decoration: none;
color: #8F181B;
font-weight: normal;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #DBD0CA;
}
nav ul li a:hover, a:active {
position: relative;
height: 27px;
color: #FFF;
background-image: url(images/nav_rollover.png);
z-index: 6;
padding-top: 3px;
}
You need to reset the padding on the ul as it is the left padding that is causing the element to go to the next line:
nav ul {
position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;
padding: 0; // added
}
I've been around and around in circles with this one, almost finished my web page and all good in most browsers except the inevitable IE6! I've been doing some research and found out there is a problem with padding and margin in CSS, and have tried to no avail. Is there someone out there who might be able to help?
www.theclubnetwork.co.uk
body {
background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
margin: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: blue;
margin:0;
padding:0;
}
#env {
position: relative;
margin: 0 auto;
width: 934px;
background: url('../Images/env_bg.jpg') repeat-y 0 0;
margin-top: 10px;
padding: 125px 0 0 0;
}
#main {
width: 934px;
background: transparent url('../Images/main_bg.jpg') no-repeat 0 0;
z-index: 10;
}
#promo {
position: absolute;
top: 0;
left: 0;
width: 934px;
background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
position: relative;
margin: 0 auto;
top: 5px;
width: 633px;
background: url('../Images/bor_bg.gif') repeat-y 0 0;
padding: 0 0 0 0;
}
#foot {
height: 49px;
width: 912px;
background: url('../Images/foot_bg.png') no-repeat 0 100%;
padding: 0 11px 8px 11px;
color: #506273;
font-size: 11px;
clear: both;
text-align: center;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
}
#foot a {
font-weight: normal;
color: #506273;
padding-left: 0;
background-image: none;
}
#foot div {
padding: 8px 0 0 10px; /*top right bottom left*/
line-height: 16px;
}
#logo {
position: relative;
float: left;
width: 279px;
padding-right:20px;
top:20px;
left: 10px;
text-align: center;
z-index: 6;
background-color: #ffa500;
}
#slow {
position: relative;
text-align: center;
z-index: 6;
}
.nav {
position: relative;
float: left;
width: 125px;
height: 125px;
background-color: #fff;
text-align: center;
z-index: 25;
}
* html #welcome {
margin-left: 0px;
}
#welcome {
position: relative;
margin-left: 2px;
float: left;
width: 297px;
height: 150px;
background-color: #fff;
z-index: 6;
text-align: center;
vertical-align: middle;
}
a.slogan {
width: 150px;
color: blue;
font-size: 17px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.mainslogan {
width: 150px;
color: #ffa500;
font-size: 48px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.sloganmiddle {
width: 150px;
color: #ffa500;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.bottomslogan {
width: 150px;
color: #fff;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.welcome_text {
position : relative;
top: 10px;
color: blue;
font-size: 30px;
vertical-align: top;
z-index: 6;
display: block;
}
.our_web {
position : relative;
color: #ffa500;
top: 10px;
font-size: 20px;
padding-bottom:7px;
display:block;
}
a.form {
font-size: 13px;
padding-top:10px;
padding-bottom: 10px;
color: blue;
}
a.first_web {
position : relative;
color: #0d7acf;
top: 0px;
padding-left: 0;
padding-right: 0;
padding-top: 0px;
text-align: middle;
display: inline;
}
p.statement {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
text-align: justify;
}
p.allocated {
text-align: right;
}
* html .clubreg {
padding-right: 0px;
padding-left: 0px;
}
.clubreg {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
z-index: 10;
padding-top: 12px;
padding-right: 13px;
padding-left: 12px;
text-align: left;
}
.memreg {
position: relative;
float: left;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
text-align: left;
}
.clubform {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
padding-right: 12px;
padding-left: 12px;
text-align: left;
}
div.box335 {
width: 220px;
float: left;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box335in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 {
width: 220px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box220in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 {
width: 267px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0;
}
div.box267in {
background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
position: relative;
float: left;
margin-left: 2px;
width: 287px;
height: 165px;
background-color: #fff;
z-index: 6;
text-align: left;
color: #0d7acf;
padding-left: 12px;
padding-right: 0px;
padding-top: 13px;
}
div.box454 {
width: 454px;
height: auto;
float: left;
background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0;
}
div.box454in {
background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 {
width: 609px;
min-height: 340px;
height: auto;
float: left;
background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in {
background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left;
min-height: 478px;
padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
color: blue;
width: 100%;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
font-weight: bold;
text-align: center;
}
div.regreasons {
text-align: center;
font-weight: bold;
padding-left: 10px;
padding-right:10px;
}
div.box145 {
width: 145px;
float: left;
padding-top: 5px;
padding-right: 0px;
background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in {
background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left;
min-height: 100px;
padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
left: 0px;
}
div.advertising {
position: relative;
float: right;
width: 150px;
height: 168px;
left: -2px;
padding-right: 5px;
padding-left: 0px;
padding-bottom: 0px;
text-align: left;
padding-top: 12px;
background-color: #fff;
}
.memreg2 {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 0px;
padding-top: 12px;
padding-left: 12px;
text-align: center;
}
li {
padding-bottom: 8px;
}
div.buttonreg {
text-align: center;
vertical-align:bottom;
}
#faq {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 20px;
text-align: justify;
text-align:center;
}
* html #sales {
margin-left: 0px;
}
#sales {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 367px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
}
#joining {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 535px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#control_panel {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 480px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#minimnu {
position : relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: left;
}
#focusContainer {
width: 190px;
margin: auto;
background-color: #71707f;
padding: 17px 17px 10px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#focusContainer a {
display:block;
background-color: #383737;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #000000;
width: 100%;
margin-bottom: 5px;
font-weight: 400;
}
#focusContainer a:hover {
background-color: #ffa500;
color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
padding-left: 10px;
color: #fff;
width: 100%;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.span {
padding-left: 10px;
color: #fff;
width: 150px;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 15px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
a#selected, a#selected:hover {
background: #ffa500;
color: blue;
}
a.newshead {
text-decoration: underline;
}
#leftside {
position: relative;
float: left;
}
.rbsworldpay {
position: relative;
display: block;
width = 100%;
text-align: center;
margin-left: 2px;
}
#clubinfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: blue;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px;
}
#meminfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: yellow;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px
}
.moreinfo {
float: right;
padding-right: 10px;
padding-top: 10px;
}
#bottomlink {
color: #0d7acf;
height: 48px;
padding: 0px;
}
a.club_details {
color: blue;
padding-top: 20px;
padding-left: 20px;
font-size: 12pt;
text-decoration: underline;
text-align: center;
}
In response to the only question in your post
"Is there someone out there who might be able to help?"
Yes.
Make sure your HTML has a DOCTYPE, to trigger IE6's standards mode. That's likely to eliminate a lot of CSS craziness (and possibly introduce some other craziness, but there will be less of it and it'll happen in all browsers).
To avoid having trouble with different browser behaviour, I'd suggest you use a CCS reset.
Eric Meyer explains well and offers a free example at meyerweb. That won't solve all your problems, but would certainly be a good start.
A couple of things that I saw right away.
You don't have a font size set for your h2 in the div #sales and IE is using a bigger font size. IE6 uses width and height as suggestions and will expand divs to fit the content.
Your .box335in has a width of 220px however your .member_title div has a width of 220px plus a right padding of 40px for a total width of 260px. Once again IE6 is expanding the .box335in to fit the wider width.
I wouldn't worry about making things compatible with IE6 anymore.