CSS gurus, why is my page messed up on right hand side ?

[2levelsabove]

http://alltherides.com

 

It appears fine on my machine (FF IE both) . But on certain computers typically with old browsers it looks all messed up. That is the right of the page starts shifting over.

 

look at the following links:

http://alltherides.com/2001_BMW_X5_for_sale_15402.html

 

please recommend a solution. This keeps me up at nights.

 

[SuperBlue]

You should apply a min-width to your maincontainer, while this won't solve the issue, its a step on the right road.

 

I suspect the problem on your site being due to incorrect usage of absolute positioning, you need to position your wrapper, presumebly the maincontainer as well for positioning to work the usual intended way.

 

If you don't do this, the columns will simply overlap on smaller screen-resolutions, which is just one of many bad-practices that are common among beginners.

[2levelsabove]

i am a css novice.

 

This is what I have

 

body{
margin:0;
padding:0;
line-height: 1em;
}

img{ border-style:none;


}

b{font-size: 110%;}
em{color: red;}


#topsection{

height: 100px; /*Height of top section*/
width: 100%;
background:url(../../../images/logo.jpg) no-repeat; 

}

#topsection a{
color:#CCCCCC;

}



#navheader{
/*background:#C0C8DD;*/

background:#4A7BB5;
height: 31px; /*Height of top section*/

}


#navheader a{ color:#CCCCCC;
}



#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 15% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
/*background:#C0C8DD;*/

background:#4A7BB5;
}

#rightcolumn{
float: left;
width: 17%; /*Width of right column in pixels*/
margin-left: -17%; /*Set margin to that of -(RightColumnWidth)*/
/*background:#C0C8DD;*/

background:#4A7BB5;
}

#footer{
clear: left;
width: 100%;
background: #3B5998;
color:#CCCCCC;
text-align: center;
padding: 4px 0;
}

#footer a{

color:#FFFFFF;
}


.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}


.category_header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color:#FFFFFF;
background-color:#3B5998;

text-align:center;

}
.category_listing {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
}


a {
FONT-WEIGHT: bold;
FONT-SIZE: 10px; COLOR: #006699;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;

}

a:hover {color: #ffffff; background-color:#006699;}


.form_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.bold_red {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FF0000;
}

.latest_rides{ 

}

.latest_rides a {
font-size:54%;
font-weight:bold;
}


.viewlisting_header_text{font-size:24px;
font-weight:bolder;
}

.news_column a {

}

.greenmoney {

color: #009900;
font-size:12px;

}


.columnText {
font-size:12px;
}

.topnavlinks {
color:#000000;
}

.didyouknow{color:#FF6600;
font-stretch:semi-expanded;
font-weight:700;

}

.vin {
font-size:16px;
font-weight:bold;

}


}

[BoltZ]

Can you show a ss for us with computers who don't have old browsers? Use paint and point an arrow at the place where its messed up.