Jump to content

3 hrs later I'm still lost. Please Help

Canadian

By Canadian
in CSS Help

 Share

Recommended Posts

Canadian Member

Canadian

Posted
Posted

I need help.  I have a container div and then 3 divs inside.  This is a 3 column page.  So you have a left, center and right div.  Everything works great in FF/Chrome/Safari/Opera but of course not in IE8.  In IE8 the div on the right drops below the other 2 divs.

 

Note*  If I comment out the center div, the right stays where it is supposed to.

 

ANY help would be greatly appreciated.  It's been a 17hr day!

 

Thanks!

 

Here is my doc type...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Here is the container div...

 

#container {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
border: 2px solid #CCCCCC;
min-height: 600px;
background-color: #FFFFFF;
}

 

Here is the div on the far left...

 

#left {
margin: 10px;
float: left;
width: 380px;
min-height: 400px;
display: inline;
}

 

Here is the center div...

 

#center {
display: inline-block;
width: 470px;
height: auto;
margin-top: 20px;
}

 

Here is the far right div...

 

.right {
background-image: url(../images/template_wheel_pic_transparent_background.png);
background-repeat: repeat;
float: right;
width: 60px;
min-height: auto;
padding: 20px;
}

Link to comment
Share on other sites
floridaflatlander Regular Member

floridaflatlander

Posted
Posted

Update.  It is happening when I add any height to the center div. 

 

I meant a width of 895px total for the left center and right div.

 

And yes I'd make a width of 895 total or 890 for all the divs in ie 8 or ie 9

 

It's like the right div doesn't realize it's supposed to be "beside" the middle div.

 

Are you missing a closing </div>

Link to comment
Share on other sites
Canadian Member

Canadian

Posted
  • Author
Posted

Update.  It is happening when I add any height to the center div. 

 

I meant a width of 895px total for the left center and right div.

 

And yes I'd make a width of 895 total or 890 for all the divs in ie 8 or ie 9

 

It's like the right div doesn't realize it's supposed to be "beside" the middle div.

 

Are you missing a closing </div>

 

Sorry.  Yes I made the total of all divs 895 or less and still nothing.  I checked for a missing </div>.  There are no missing </div>'s.

 

Thanks again

Link to comment
Share on other sites
Canadian Member

Canadian

Posted
  • Author
Posted

can you post a link to an online example. i'll have a look at it. or the complete code as a whole.

 

I really appreciate your offer to help.  Here is the .php file and the css file.  Let me know if you need anything else.

 

<!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>XXXXXX YYYYYYY - XXXXXX 60</title>

<link rel="stylesheet" type="text/css" href="../styles/template_new.css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

<script type="text/javascript" src="scripts/tabs.js"></script>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>



<script type="text/javascript">

function MM_preloadImages() { 
	//v3.0
	var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { 
	//v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
	var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
	if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
	var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

</script>

</head>

<body onload="MM_preloadImages('images/YYYYYYYs_detail_60_blue.gif','images/YYYYYYYs_detail_60_red.gif','images/YYYYYYYs_detail_60_orange.gif','images/YYYYYYYs_detail_60_grey.gif','images/YYYYYYYs_detail_60_pink.gif','images/YYYYYYYs_detail_60_green.gif','images/YYYYYYYs_detail_60_yellow.gif','images/YYYYYYYs_detail_60_purple.gif','images/YYYYYYYs_detail_60_black.gif','images/YYYYYYYs_detail_60_stealth.gif')">

<?php include_once("google_analytics.php") ?>

<div id="main">

<div class="container_main">
  
	<div id="header">
        
		<ul id="menu">
        
			<li><a href="http://www.XXXXXXYYYYYYY.com/dev/YYYYYYYs.php" id="YYYYYYYs_nav">YYYYYYYs</a></li>
			<li><a href="http://www.XXXXXXYYYYYYY.com/store/index.php" id ="store_nav">Store</a></li>
			<li><a href="http://XXXXXXYYYYYYY.blogspot.com/" id ="blog_nav">Blog</a></li>
			<li><a href="http://www.XXXXXXYYYYYYY.com/dev/aero.php" id ="aero_nav">Aerodynamics</a></li>
			<li><a href="http://www.XXXXXXYYYYYYY.com/dev/about.php" id ="about_nav">About</a></li>
			<li><a href="http://www.XXXXXXYYYYYYY.com/dev/contact.php" id ="contact_nav">Contact</a></li>

		</ul>
        
		<div id="logo">  
      
			<a href="http://www.XXXXXXYYYYYYY.com/dev/slider.php"><img src="http://www.XXXXXXYYYYYYY.com/dev/images/template_XXXXXX_logo_reflection.gif" alt="XXXXXX YYYYYYY" border="0" class="header_img" /></a>
        
			<h1>XXXXXX YYYYYYY</h1>  
			<small>affordable aero YYYYYYY YYYYYYYs</small>  
                    
		</div> <!--logo--> 
        
	</div> <!--header-->
    
	<div id="container">
    
		<div id="left">
      
			<div class="tab_current" id="tab_1"><a href="#" onclick="showtab('pane1'); change('tab_1');">OVERVIEW</a></div> 
			<div class="tab_hide" id="tab_2"><a href="#" onclick="showtab('pane2'); change('tab_2');">SPECS</a></div>
			<div class="tab_hide" id="tab_3"><a href="#" onclick="showtab('pane3'); change('tab_3');">AERO DATA</a></div>
			<div class="tab_hide" id="tab_4"><a href="#" onclick="showtab('pane4'); change('tab_4');">TECH</a></div>
			<div class="tab_hide" id="tab_5"><a href="#" onclick="showtab('pane5'); change('tab_5');">REVIEWS</a></div>
      	
			<div class="tab" id="pane1">
            	
				<h6>XXXXXX 60</h6><br /> 
                
				<p align="justify">The XXXXXX 60 is our 60mm aaaaa fiber race YYYYYYY. It has been designed from the ground up as an aerodynamic system.  We have custom designed our rims and ffffffffff to match the width of a 23mm tire.  Our 24.3mm XXXXXX WIDE RIDE rims provide a smooth transition from tire to fairing, and eliminate the "tire bulge" experienced with traditional rim widths.  XXXXXX s Rims not only improve aerodynamics, but offer improved handling and low rolling resistance.<br /><br />
                
                    Our XXXXXX 60 FREE ffffffffff have been s.  XXXXXX FREE ffffffffff are wider than traditional ffffffffff and improve leading and trailing edge aerodynamics.  XXXXXX FREE fairing also improves cross wind stability.<br /><br />
                    
                    The XXXXXX 60 is finished with industry leading sy ccccccccccccc and our XXXXXX s Hubs.  With the XXXXXX 60 YYYYYYY set, you'll be arriving at the finish line of your next 40km time trial 60 seconds faster.  The XXXXXX 60 is our most versatile race YYYYYYY that is great for sssssssssssss, road racing, climbing and whatever else your legs can handle.</p>  <br />
                  
                
				<h6 align="justify">Key Features</h6>
                
				<blockquote>
					<p align="justify">- XXXXXX FREE aaaaa Fiber Fairing</p>
					<p align="justify">- XXXXXX WIDE RIDE Rims</p>
					<p align="justify">- XXXXXX s Hubs</p>
					<p align="justify">- s CX-Ray ccccccccccccc</p>
				</blockquote><br />      
                
				<h6 align="justify">Ideal Use</h6>
                
				<blockquote>
					<p align="justify">- sssssss and Time Trial</p>
					<p align="justify">- Road Racing</p>
					<p align="justify">- Climbing</p>
				</blockquote>

			</div><!--pane1-->
                             
			<div class="tab" id="pane2" style="display: none;">

				<table width="360" border="0" cellspacing="0" cellpadding="0">
              
					<h6>XXXXXX 60</h6><br />
					<h6>Front YYYYYYY</h6>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Weight</td>
						<td class="dark_table_column_right">800 grams</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Rim</td>
						<td class="light_table_column_right">XXXXXX WIDE RIDE (24.3mm Brake Track)</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Fairing</td>
						<td class="dark_table_column_right">XXXXXX FREE Wide Toroidal (60mm Depth)</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Fairing Material</td>
						<td class="light_table_column_right">aaaaa Fiber (3k Weave)</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">ccccccccccccc</td>
						<td class="dark_table_column_right">s-Ray</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Spoke Count</td>
						<td class="light_table_column_right">20</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Spoke Pattern</td>
						<td class="dark_table_column_right">Radial</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Max Width</td>
						<td class="light_table_column_right">27.2mm</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Hubs</td>
						<td class="dark_table_column_right">XXXXXX s Hubs (Stainless Bearings)</td>
					</tr>

				</table><br />
            
				<table width="360" border="0" cellspacing="0" cellpadding="0">
              
					<h6>Rear YYYYYYY</h6>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Weight</td>
						<td class="dark_table_column_right">998 grams</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Rim</td>
						<td class="light_table_column_right">XXXXXX WIDE RIDE (24.3mm Brake Track)</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Fairing</td>
						<td class="dark_table_column_right">XXXXXX FREE Wide Toroidal (60mm Depth)</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Fairing Material</td>
						<td class="light_table_column_right">aaaaa Fiber (3k Weave)</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">ccccccccccccc</td>
						<td class="dark_table_column_right">Sapim CX-Ray</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Spoke Count</td>
						<td class="light_table_column_right">24 (28 for Clydesdale 190-230lbs)</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Spoke Pattern</td>
						<td class="dark_table_column_right">2 Cross</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left">Max Width</td>
						<td class="light_table_column_right">27.2mm</td>
					</tr>
					<tr class="dark_table_row">
						<td class="dark_table_column_left">Hubs</td>
						<td class="dark_table_column_right">XXXXXXsHubs (Stainless Bearings)</td>
					</tr>
					<tr class="light_table_row">
						<td class="light_table_column_left_bottom">Cassette</td>
						<td class="light_table_column_right_bottom">Shimano or Campy</td>
					</tr>

				</table>

			</div><!--pane2-->

  
			<div class="tab" id="pane3" style="display: none;">

				<h6>XXXXXX 60 s Data</h6><br />
                
				<a href="images/XXXXXX_Aero_Data.png" rel="lightbox[detail]" title="XXXXXX Aero Data Zoom" align="center"><img src="images/XXXXXX_Aero_Data_Thumb.png" alt="XXXXXX YYYYYYYs"/><br /></a><br />
                
				<h6>sTunnel</h6><br />
                
				<!-- To make is so the Youtube video doesn't stick in front of your lightbox add this to the end of the url... ?wmode=transparent -->
                
				<iframe width="360" height="220" src="http://www.youtube.com/embed/_NNNBBBNNNJJJt" frameborder="0" allowfullscreen></iframe>
                        
			</div><!--pane3-->
        
        
			<div class="tab" id="pane4" style="display: none;">

				<h6>XXXXXX FREE ffffffffff</h6><br />
               
				<div id="XXXXXXat_left_five_pixel_margin"><a href="images/XXXXXX_60_fairing_detail.png" rel="lightbox[detail]" title="XXXXXX 60 Fairing Zoom" align="center"><img src="images/XXXXXX_60_fairing_thumb.png" alt="XXXXXX YYYYYYYs"/><br />XXXXXX FREE</a><br /></div>
               
				<p align="justify">XXXXXX FREE ffffffffff have been designed with a new wide toroidal fairing.  In bicyle YYYYYYY aerodynamics the trailing edge of the front half of a YYYYYYY is actually the leading edge of the back half of a YYYYYYY.  The XXXXXX FREE fairing has been designed to be aerodynamic as both a leading and trailing edge.  All of this adds up to a very aerdodynnamic YYYYYYY.    </p><br />
                
				<img src="images/YYYYYYY_info_divider.gif" /><br /><br />
                
				<h6>XXXXXX WIDE RIDE Rims</h6><br />
               
				<div id="XXXXXXat_left_five_pixel_margin"><a href="images/XXXXXX_wide_ride_detail.png" rel="lightbox[detail]" title="XXXXXX WIDE RIDE Rim Zoom"><img src="images/XXXXXX_wide_ride_thumb.png" alt="XXXXXX YYYYYYYs"/><br />XXXXXX WIDE RIDE</a><br /></div>
               
				<p align="justify">XXXXXX WIDE RIDE Rims have been designed to mate perfectly with our wide XXXXXX FREE toroidal ffffffffff.  The 24.3mm wide brake track makes the perfect transition from tire to fairing giving air a smooth path to follow.  The additional width underfoot gives improved handling, cornering and a low rolling resistance.</p><br />
               
				<img src="images/YYYYYYY_info_divider.gif" /><br /><br />
                
				<h6>XXXXXX VORTEX Hubs</h6><br />
               
				<div id="XXXXXXat_left_five_pixel_margin"><a href="images/XXXXXX_hub_detail.png" rel="lightbox[detail]" title="XXXXXX 60 Fairing Zoom"><img src="images/XXXXXX_hub_thumb.png" alt="XXXXXX YYYYYYYs"/><br />XXXXXX VORTEX</a></div>              
              
				<p align="justify">asd as d alf ei t alwi alw aiw fte la alk TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p> 
      
			</div><!--pane4-->

                             
			<div class="tab" id="pane5" style="display: none;">
        
				<h6>TRIRIG.com Review</h6><br />
          
				<iframe width="360" height="220" src="http://www.youtube.com/embed/HOIIUUUUNNNKKKtransparent" frameborder="0" allowfullscreen></iframe>
                
			</div><!--pane5-->

		</div><!--content_tabs-->
      
		<div id="center">
      
			<img src="../images/YYYYYYYs_detail_XXXXXX_60_blue.gif" name="XXXXXX_90_zoom" id="XXXXXX_90_zoom"/>
     
      
			<img src="../images/YYYYYYY_detail_color_selector_blue.gif" name="blue" class="color_selector_left" id="blue" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_blue.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_red.gif" name="red" class="color_selector" id="red" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_red.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_green.gif" name="green" class="color_selector" id="green" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_green.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_orange.gif" name="orange" class="color_selector" id="orange" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_orange.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_yellow.gif" name="yellow" class="color_selector" id="yellow" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_yellow.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_pink.gif" name="pink" class="color_selector" id="pink" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_pink.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_purple.gif" name="purple" class="color_selector" id="purple" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_purple.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_grey.gif" name="grey" class="color_selector" id="grey" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_grey.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_black.gif" name="black" class="color_selector" id="black" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_black.gif',1)" />
			<img src="../images/YYYYYYY_detail_color_selector_stealth.gif" name="stealth" class="color_selector" id="stealth" onclick="MM_swapImage('XXXXXX_90_zoom','','../images/YYYYYYYs_detail_XXXXXX_60_stealth.gif',1)" />        
      
			<br /><br /><p align="center">Click to Swap Color</p>

		</div> <!-- detail_test -->
          
		<div class="right">
            
			<a href="images/YYYYYYYs_lightbox_XXXXXX_60_detail_1.gif" rel="lightbox[detail]" title="XXXXXX 60 Zoom"><img src="images/YYYYYYYs_lightbox_XXXXXX_60_thumb_1.gif" alt="XXXXXX YYYYYYYs" 
                /></a>
			<a href="images/YYYYYYYs_lightbox_XXXXXX_60_detail_2.gif" rel="lightbox[detail]"title="XXXXXX 60 Hub Detail"><img src="images/YYYYYYYs_lightbox_XXXXXX_60_thumb_2.gif" alt="XXXXXX YYYYYYYs" 
                /></a>
			<a href="images/YYYYYYYs_lightbox_XXXXXX_60_detail_3.gif" rel="lightbox[detail]"title="XXXXXX 60 YYYYYYYset"><img src="images/YYYYYYYs_lightbox_XXXXXX_60_thumb_3.gif" alt="XXXXXX YYYYYYYs" 
                /></a>  
                
			<br /><br />
              
			<!-- Buy Now Button -->
                
			<p class="fineprint">s9</p><br />
                
			<span class="buy_now_button"> <a href="http://www.XXXXXXYYYYYYY.com/store/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../images/YYYYYYYs_buy_now_button_rollover.png',1)"><img src="../images/YYYYYYYs_buy_now_button.png" name="Image10" width="60" height="21" border="0" id="Image10" /></a> </span>
               
               
			<!-- Facebook Like -->
               
			<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FXXXXXX-YYYYYYY%2F135949109778769&layout=box_count&show_faces=false&width=55&action=like&font&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overXXXXXXw:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>  
                
			<br />
                
                <!-- Twitter Tweet -->
                
			<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="XXXXXXYYYYYYY">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
                
		</div><!--light_box_pics-->
      
		<!-- This is the clearer div explained in template_new.css.  This allows the "content_info_page" div's height to auto expand.-->
        
		<div class="clearer"><!-- --></div>
      
	</div><!--content_YYYYYYYs-->

</div><!--container-->
    
</div> <!--main-->

<?php
include("footer_XXXXXX.php");
?>

 

 

 

 

CSS File

 

/*Page Properties
---------------------------------------------------------------------------*/

body,td,th {
font-family: Lucida Grande, Arial, Helvetica, Verdana;
font-size: 12px;
color: #333333;
}

body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

a {
font-size: 12px;
color: #0066FF;
margin: 0px;
padding: 0px;
}

a:link {
text-decoration: none;
margin: 0px;
padding: 0px;
}

a:visited {
text-decoration: none;
color: #0066FF;
margin: 0px;
padding: 0px;
}
a:hover {
text-decoration: none;
color: #0066FF;
margin: 0px;
padding: 0px;
}

a:active {
text-decoration: none;
margin: 0px;
padding: 0px;
}

h1 {
font-size: 28px;
margin: 0px;
padding: 0px;
}

h2 {
font-size: 24px;
margin: 0px;
padding: 0px;
}

h3 {
font-size: 20px;
margin: 0px;
padding: 0px;
}

h4 {
font-size: 18px;
margin: 0px;
padding: 0px;
}

h5 {
font-size: 16px;
margin: 0px;
padding: 0px;
}

h6 {
font-size: 14px;
margin: 0px;
padding: 0px;
}

p {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 12px;
color: #333333;
margin: 0px;
padding: 0px;
}

form {
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
}

blockquote {
margin-top: 0;
margin-bottom: 0;
margin-left: 10px;
margin-right: 0;
}

.white_text {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 14px;
color: #ffffff;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

.five_pixel_margin_top {
margin-top: 5px;
}

.five_pixel_margin_bottom {
margin-bottom: 5px;
}

#float_left_five_pixel_margin {
float: left;
text-align: center;
margin-right: 20px;
margin-left: 20px;
}

.fineprint {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 10px;
color: #333333;
margin: 0px;
padding: 0px;
text-align: center;
}

.float_right {
float: right;
text-align: center;
margin-left: 20px;
margin-top: 20px;
}

.float_left {
float: left;
margin: 0px;
}



/*Page Layout
---------------------------------------------------------------------*/

#main {
width: 980px;
margin-right: auto;
margin-left: auto;
}

.container {
background-color: #FFFFFF;
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#header {
padding-top: 0px;
}

.header_footer_img {
float: left;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

#content {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
border: 2px solid #CCCCCC;
height: auto;
background-image: url(../images/template_light_bg_color.gif);
background-repeat: repeat-y;
}

#content_info_pages {
width: 940px;
margin-right: auto;
margin-left: auto;
position: relative;
border: 2px solid #CCCCCC;
padding: 20px;
min-height: 400px;
clear: both;
}

#content_top {
width: 980px;
height: 300px;
position: relative;
}

#content_coming_soon {
width: 980px;
height: 377px;
position: relative;
background-image: url(../images/xxx_coming_soon.png);
}

.content_top {
width: 980px;
padding: 0;
margin: 0 auto;
}

#content_bottom {
width: 980px;
height: auto;
position: relative;
clear: both;
}	

.mini_content_left {
float: left;
min-height: 190px;
width: 276px;
display: inline;
border: 2px solid #CCCCCC;
margin: 20px;
padding: 10px;
background-color: white;
/*background-image: url(../images/mini_content_background.png);*/
}

.mini_content_center {
float: left;
min-height: 190px;
width: 276px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
display: inline;
background-color: white;
/*background-image: url(../images/mini_content_background.png);*/
border: 2px solid #CCCCCC;
padding: 10px;
}

.mini_content_right {
float: left;
min-height: 190px;
width: 276px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #333333;
display: inline;
background-color: white;
/*background-image: url(../images/mini_content_background.png);*/
border: 2px solid #CCCCCC;
padding: 10px;
}


#sign_up {
width: 280px;
height: 70px;
position: absolute;
bottom: 0px;
right: 0px;
background-image: url(../images/coming_soon_sign_up.png);
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}

#home_middle_bar {
float: left;
min-height: 26px;
width: 927px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
background-color: #333333;
display: inline;
background-color: white;
/*background-image: url(../images/mini_content_background.png);*/
border: 2px solid #CCCCCC;
padding-right: 0px;
padding-left: 10px;
padding-bottom: 0px;
padding-top: 0px;
}

#home_middle_bar_left {
float: left;
display: inline;	
}

#home_middle_bar_right {
float: right;
display: inline;
padding: 5px;
width: 269px;
background-image: url(../images/xxx_home_sign_up_bg.png);	
}

#vote {
float: left;
min-height: 26px;
width: 917px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
background-color: #333333;
display: inline;
background-color: white;
/*background-image: url(../images/mini_content_background.png);*/
border: 2px solid #CCCCCC;
padding: 10px;
}

#home_middle_bar_text_1 {
float: left;
margin-top: 17px;
}

#home_middle_bar_text_2 {
padding-top: 7px;
float: left;
margin-top: 17px;
}

#vote_text_1 {
float: left;
}

#vote_text_2 {
padding-top: 7px;
}




/*Contact Us Page
---------------------------------------------------------------------*/

#contact_us_left {
float: left;
width: 467px;
}

#contact_us_right {
width: 467px;
margin-left: 470px;
}



/*Wheel Pages
---------------------------------------------------------------------*/

/* .clearer is the piece of code you use to get the "wrapper" to adjust to the content inside of it.  For example... on the "template_blank" pages you have the "content_info_page" div
If you place divs inside of that and float them left (just like the wheels.php page) the content info page does not adjust it's height according to the divs inside.  So what you do
is place the .clearer div below the last div inside of the "content_info_page" div.  See the wheels.php page for the full html explanation.*/

/*Main Page*/

.clearer {
clear: both;
}


#wheel_main_one {
padding: 5px;
clear: both;
float: left;
height: 208px;
width: 294px;
border: 1px solid #999999;
background-image: url(../images/sss.png);
margin-right: 10px;
margin-bottom: 10px;
display: inline;
}

#wheel_main_two {
padding: 5px;
float: left;
height: 208px;
width: 294px;
border: 1px solid #999999;
background-image: url(../images/sss.png);
margin-right: 10px;
margin-bottom: 10px;
display: inline;
}

#wheel_main_three {
padding: 5px;
float: left;
height: 208px;
width: 294px;
border: 1px solid #999999;
background-image: url(../images/sss.png);
margin-bottom: 10px;
display: inline;
}

#wheel_main_four {
padding: 5px;
float: left;
height: 208px;
width: 294px;
border: 1px solid #999999;
background-image: url(../images/sss.png);
margin-right: 10px;
display: inline;
}

#wheel_main_five {
padding: 5px;
float: left;
height: 208px;
width: 294px;
border: 1px solid #999999;
background-image: url(../images/sss.png);
margin-right: 10px;
display: inline;
}

#wheel_main_six {
padding: 5px;
float: left;
height: 208px;
width: 294px;
border: 1px solid #999999;
background-image: url(../images/sss.png);
display: inline;
}

#content_wheel {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
border: 2px solid #CCCCCC;
min-height: 600px;
background-color: #FFFFFF;
}

#wheel_main_text_box {
float: right;
margin-top: 5px;
margin-right: 5px;
}

.wheel_main_title_text {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 20px;
color: #666666;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.wheel_main_title_text_blue {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 20px;
color: #0099FF;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.wheel_main_subtitle_text {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 14px;
color: #666666;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.wheel_main_price_text {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 11px;
color: #666666;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.wheel_select_detail_text {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 12px;
color: #666666;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.wheel_select_detail_text_blue {
font-family: "Lucida Grande", Arial, Verdana, Helvetica;
font-size: 12px;
color: #0099FF;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

/*Model Select Pages*/

#content_wheel_model_select_pages {
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;
border: 2px solid #CCCCCC;
min-height: 500px;
clear: both;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}

#wheel_select_text_box {
float: left;
width: 357px;
margin-top: 30px;
}

#model_box {
float: left;
width: 357px;
margin-right: 8px;
margin-bottom: 8px;
display: inline;
}

#wheels_flo_60_select_bg_pic {
background-image: url(../images/sss.png);
height: 500px;
width: 600px;
margin-left: 360px;
}

#wheels_flo_90_select_bg_pic {
background-image: url(../images/sss.png);
height: 500px;
width: 600px;
margin-left: 360px;
}

#wheels_flo_disc_select_bg_pic {
background-image: url(../images/sss.png);
height: 500px;
width: 600px;
margin-left: 360px;
}

#wheels_flo_special_edition_select_bg_pic {
background-image: url(../images/sss.png);
height: 500px;
width: 600px;
margin-left: 360px;
}

#wheels_flo_aero_arsenal_select_bg_pic {
background-image: url(../images/sss.png);
height: 500px;
width: 600px;
margin-left: 360px;
}

#wheels_flo_climbing_select_bg_pic {
background-image: url(../images/sss.png);
height: 500px;
width: 600px;
margin-left: 360px;
}

.divider_margin {
margin-bottom: 6px;
}

/*Detail Page*/

#left {
margin: 10px;
float: left;
width: 380px;
min-height: 400px;
display: inline;
}

.dark_table_row {
background-image: url(../images/template_small_block_background.png);
background-repeat: repeat;
}

.dark_table_column_left {
border: 1px solid #999999;
padding: 4px;
}

.dark_table_column_right {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
padding: 4px;
color: #666666;
}

.light_table_column_left {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
padding: 4px;
}

.light_table_column_right {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
padding: 4px;
color: #666666;
}

.light_table_column_left_bottom {
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-right-color: #999999;
border-left-color: #999999;
border-bottom-color: #999999;
padding: 4px;
}

.light_table_column_right_bottom {
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #999999;
border-bottom-color: #999999;
padding: 4px;
color: #666666;
}

.table_header_aero_page {
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-left-color: #999999;
}


/*#content_pics {
width: 577px;
margin-left: 400px;
height: 600px;
margin-top: 10px;
background-image: url(../images/template_wheelpage_background.gif);
}*/

#center {
display: inline-block;
width: 470px;
height: auto;
margin-top: 20px;
}

.color_selector {
margin-top: 20px;
margin-left: 10px;
}

.color_selector_left {
margin-top: 30px;
margin-left: 48px;
}

.right {
background-image: url(../images/template_wheel_pic_transparent_background.png);
background-repeat: repeat;
float: right;
width: 60px;
min-height: auto;
padding: 20px;
}

.light_box_pics img {
margin-bottom:20px;
border: 2px solid #999999;
}

.buy_now_button {
}

.buy_now_button img {
border: none;
}




/*About Us Page
---------------------------------------------------------------------*/

.about_table_row {

}

.about_table_column_left {
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding: 10px;
font-size: 18px;
text-align: right;
vertical-align: top;
}

.about_table_column_right {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
text-align: justify;
vertical-align: top;
}

.about_table_column_right img{
float: left;
margin-right: 20px;	
}




/*Navigation Menu
---------------------------------------------------------------------*/

ul#menu {
margin:0px;
padding:0px;
position:absolute;
right: 0px;
top: 42px;
} 

ul#menu li {  
    display:inline;  
margin-left: 16px;
}  

ul#menu li a {
text-decoration:none;
color:#333333;
font-family:"Lucida Grande", Arial, Helvetica, Verdana;
font-size:14px;
font-weight:normal;
text-transform:none;
}  
ul#menu li a.active, ul#menu li a:hover {
color:#0066FF;
} 

#logo h1, #logo small {  
    margin:0px;  
    display:block;  
    text-indent:-9999px;  
}

#logo {
width:124px;
height:60px;
} 

body#wheels a#wheels_nav,
body#store a#store_nav,
body#blog a#blog_nav,
body#aero a#aero_nav,
body#about a#about_nav,
body#contact a#contact_nav{
color: #0066FF;
}



/*Footer
---------------------------------------------------------------------*/

#footer {
height: 48px;
margin: 0px;
padding: 0px;
}

.footer_container {
height: 48px;
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

.footer_content {
padding-top: 0px;
}

ul#footer_menu {
margin:0px;
padding:0px;
position:absolute;
right: 0px;
} 

ul#footer_menu li {  
    display:inline;  
margin-left: 16px;
}  

ul#footer_menu li a {
text-decoration:none;
color:#666666;
font-family:"Lucida Grande", Arial, Helvetica, Verdana;
font-size:11px;
font-weight:normal;
text-transform:none;
}  
ul#footer_menu li a.active, ul#footer_menu li a:hover {
color:#0066FF;
}

#footer h1, #footer small {  
    margin:0px;  
    display:block;  
    text-indent:-9999px; 
}

#social_media {
width:320px;
height:48px;
margin: 0px;
padding: 0px;
} 



/*Tabs on Product Pages
---------------------------------------------------------------------*/

#info_tabs {
padding-top: 5px;
padding-bottom: 5px;
}

div.tab {
background: #FFFFFF;
min-height: 350px;
clear: both;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0px;
}

.tab_current {
float: left;
width: auto;
background-color: #FFFFFF;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-left-color: #999999;
border-bottom-width: 0px;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
border-bottom-style: solid;
border-bottom-color: #999999;
}

.tab_current a {
text-decoration:none;
color:#0066FF;
font-family:"Lucida Grande", Arial, Helvetica, Verdana;
font-size:12px;
font-weight:normal;
text-transform:none;
}  
.tab_current a.active, .tab_current a:hover {
color:#0066FF;
} 

.tab_hide {
float: left;
width: auto;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-left-color: #999999;
border-bottom-width: 1px;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
background-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-color: #999999;
}

.tab_hide a {
text-decoration:none;
color:#333333;
font-family:"Lucida Grande", Arial, Helvetica, Verdana;
font-size:12px;
font-weight:normal;
text-transform:none;
}  
.tab_hide a.active, .tab_hide a:hover {
color:#0066FF;
}

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

well i see what your trying. First things first make a template without content and keep it simple and efficient.

 

In a nutshell your design consists of 1 container width a fixed width centred in the middle.

furthermore you have (or trying to have) 3 columns. Now what i always do is the following. Give each div a background color, just so you see where it is positioned. Also compare the divs, which properties do they have in common. now have a look at the code below:

 

That is a simple template without unnecessary javascript or serverside (php) and other stuff we don't need. we first need a decent template.

As you can see i first created a container. we know the width and the position and maybe a little space between its border and the inner elements so we add a padding and that is pretty much it. (you know the difference between padding and margin?)

 

Next the divs/columns. they all have something in common: the can all be floated left (yes that may sound weird but trust me either float left or right don't use both, I just gave them all a min-height and a margin-right to create some space).

 

The next thing that we need to do is make the divs more unique so we give them a different color and width. And Watch what i did with the margin-right for the right div. I set that to 0 otherwise it doesn't fit in the container.

 

Now we made a simple template without having to worry about the impact of other scripts. (always make a template without content. add that later)

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <title></title>
<style type="text/css">
#container {
        width: 980px;
        margin:0 auto;
        position: relative; /* not needed really needed but it does no harm*/
        border: 2px solid #CCC;
        overflow:hidden; /* will make it shrinkwrap around inner contents */
        padding:10px;
        background: #FFF;
}
#left, #center, #right{
    min-height:400px;
    float:left;
    margin-right:10px; /* give them all a margin right */
}
#left {
    width: 380px;
    background:yellow;
}
#center {
    width: 470px;
    background:yellowgreen;
}
#right { /* notice  I changed this to an #id */
    width:110px;
    background:pink;
    margin-right:0; /* remove the margin right */
}

</style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
    </body>
</html>

 

Hope it helps you!

 

P.s. your code probably broke because the mix of properties like inline-block and float, which was not needed. but i thought i show you how to do a design like this more efficient without the use of a trillion lines of css. This code just works, if it now breaks because of adding content you know what is the cause of it. That's why we make a clean template first and not solve the troubles afterwards.

Link to comment
Share on other sites
Canadian Member

Canadian

Posted
  • Author
Posted

well i see what your trying. First things first make a template without content and keep it simple and efficient.

 

In a nutshell your design consists of 1 container width a fixed width centred in the middle.

furthermore you have (or trying to have) 3 columns. Now what i always do is the following. Give each div a background color, just so you see where it is positioned. Also compare the divs, which properties do they have in common. now have a look at the code below:

 

That is a simple template without unnecessary javascript or serverside (php) and other stuff we don't need. we first need a decent template.

As you can see i first created a container. we know the width and the position and maybe a little space between its border and the inner elements so we add a padding and that is pretty much it. (you know the difference between padding and margin?)

 

Next the divs/columns. they all have something in common: the can all be floated left (yes that may sound weird but trust me either float left or right don't use both, I just gave them all a min-height and a margin-right to create some space).

 

The next thing that we need to do is make the divs more unique so we give them a different color and width. And Watch what i did with the margin-right for the right div. I set that to 0 otherwise it doesn't fit in the container.

 

Now we made a simple template without having to worry about the impact of other scripts. (always make a template without content. add that later)

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <title></title>
<style type="text/css">
#container {
        width: 980px;
        margin:0 auto;
        position: relative; /* not needed really needed but it does no harm*/
        border: 2px solid #CCC;
        overflow:hidden; /* will make it shrinkwrap around inner contents */
        padding:10px;
        background: #FFF;
}
#left, #center, #right{
    min-height:400px;
    float:left;
    margin-right:10px; /* give them all a margin right */
}
#left {
    width: 380px;
    background:yellow;
}
#center {
    width: 470px;
    background:yellowgreen;
}
#right { /* notice  I changed this to an #id */
    width:110px;
    background:pink;
    margin-right:0; /* remove the margin right */
}

</style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
    </body>
</html>

 

Hope it helps you!

 

P.s. your code probably broke because the mix of properties like inline-block and float, which was not needed. but i thought i show you how to do a design like this more efficient without the use of a trillion lines of css. This code just works, if it now breaks because of adding content you know what is the cause of it. That's why we make a clean template first and not solve the troubles afterwards.

 

Wow!  Thanks for all of the help.  I'm going on my 30th hour this weekend.  I'm going to dig into this in the next week or so after I get the rest of my site live.  The page you are helping me with will be live later. 

 

Thanks again!

Link to comment
Share on other sites
Canadian Member

Canadian

Posted
  • Author
Posted

no problem. don't forget to mark it solved ones you tested it and all is clear.  ;)

 

I'd like to make a quick update.  I was mistaken with the version of IE that wasn't working.  IE8 actually works.  It's IE7 that doesn't work.  I know IE7 is old but I'm still getting a considerable amount of traffic coming to my site who use IE7.  Does this change the advice you gave me?  Is there a simple IE7 fix?

 

Sorry for mixing that up.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

no problem. don't forget to mark it solved ones you tested it and all is clear.  ;)

 

I'd like to make a quick update.  I was mistaken with the version of IE that wasn't working.  IE8 actually works.  It's IE7 that doesn't work.  I know IE7 is old but I'm still getting a considerable amount of traffic coming to my site who use IE7.  Does this change the advice you gave me?  Is there a simple IE7 fix?

 

Sorry for mixing that up.

 

No it doesn't change my advice. IE7 is still being used by quite some people, not to mention IE 6. making sure stuff works cross browser requires you to start with a clean template. (check the sticky for some other tips) Keep it simple and efficient. and simple doesn't mean lame, it means the right amount of difficulty for the right situation. In fact it's really fun ones you made a the template to look through it and see if you are declaring things double, try combine stuff, make it as efficient as possible.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.