SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right content div is wrapping under left content div

    Hi,

    Until about an hour ago, my site was looking ok! But now the right content div is wrapping under the left content div and I'm not sure what I've done to cause this!! I've tried adjusting widths etc and removing content to see if any of this has an affect but to no avail.

    The page can be seen at http://www.server1519.co.uk/products...lcon-1300.aspx

    and my css is below

    Code:
    * 
    {
    	 margin: 0;
    	 padding: 0;
    }
    body 
    {
    	margin-top: 10px;
    	font: 0.8em "Trebuchet MS", sans-serif, helvetica;
    	text-align: center;
    	background: #fff url('../media/90/falconbg.jpg') top no-repeat;
    	background-attachment: fixed;	
    }
    img 
    {
    	border: 0;
    }
    a:link, a:active, a:visited
    {  
    	color: #495561;
    	text-decoration: none;
    }  
    a:hover 
    {
    	text-decoration: underline;
    }
    h1, h2, h3 
    {
    	margin: 0;
    	padding: 0;
    }  
    h1 
    {  
    	font-size: 1.6em;
    	color: #fff;
    	letter-spacing: 0.1em;
    } 
    h2 
    {  
    	font-size: 1.6em;
    	color: #88abc9;
    	letter-spacing: 0.1em;
    	font-weight: normal;
    } 
    h3 
    {
    	margin-top: 15px;
    	font-size: 1em;
    	font-weight: bold;
    }
    p 
    {
    	padding-top: 3px;
    }  
    #wrapper 
    {
    	margin: 0 auto;
    	width: 990px;
    	text-align: left;
    }
    #groupheader 
    {
    	text-align: right;
    	padding-bottom: 10px;
    }
    #header {  
    	height: 96px;
    	background: #fff url('../media/100/topbanner.jpg') no-repeat top left;
    }  
    #header li a:hover 
    { 
    }  
    #logo 
    {
    }
    #toplinks 
    {
    	color: #fff;
    	font-size: 10px;
    	margin: 10px 15px 0 0;
    	text-align: right;
    }
    #toplinks a:link, a:active, a:visited
    {
    	color: #fff;
    	text-decoration: none;
    }
    #toplinks a:hover
    {
    	color: #1c293a;
    	text-decoration: none;
    }
    #tagline 
    {
    	color: #fff;
    	font-size: 16px;
    	text-align: right;
    	margin: 30px 15px 0 0;
    }
    
    #navigation {
    	float: left;
    	width: 990px;
    	color: #333;
    	margin: 0;
    }
    
    #breadcrumbs 
    {
    	clear: both;
    	float: left;
    	width: 600px;
    	margin: 15px 0 0 9px;
    	font-size: 0.9em;
    	color: #495561;
    }
    
    #breadcrumbs a, a:link, a:visited
    {
    	text-decoration: none;
    	color: #495561;
    }
    
    #breadcrumbs a:hover, a:active
    {
    	text-decoration: underline;
    	color: #495561;
    }
    
    #content 
    {
    	clear: both;
    	margin: 7px 0 25px 0;
    	position: relative;
    	overflow:hidden;
    }
    #leftcontent { 
    	color: #333;
    	margin: 0 5px 5px 0;
    	padding: 10px;
    	/* height: 350px; */
    	width: 690px;
    	float: left;
    }
    #leftcontent .titletab 
    {
    	float: left;
    	width: 400px;
    	background: #88abc9;
    	padding: 3px 2px 2px 5px;
    }
    #leftcontent .productinner 
    {
    	clear: both;
    	float: left;
    	width: 660px;
    	height: auto;
    	border: 1px solid #88abc9;
    	background: #ffffff;
    	padding: 15px;
    	text-align: justify;
    }
    
    #leftcontent .productinner img 
    {
    	float: left;	
    }
    #leftcontent .productinner ul
    {
    	float: left;
    	list-style: none;	
    }
    
    #leftcontent .productinner ul li
    {
    	width: 250px;
    	background: #1c293a;
    	color: #fff;
    	font-weight: bold;
    	padding: 4px 4px 5px 6px;
    	margin-top: 5px;
    }
    #leftcontent .productinner ul li a
    {
    	color: #fff;
    	text-decoration: none;
    }
    #leftcontent .inner 
    {
    	clear: both;
    	float: left;
    	width: 660px;
    	height: auto;
    	border: 1px solid #88abc9;
    	background: #ffffff;
    	padding: 15px;
    	text-align: justify;
    }
    
    #leftcontent .inner img 
    {
    	float: left;	
    }
    #leftcontent .inner ul
    {
    	float: left;
    	list-style: none;	
    }
    
    #leftcontent .inner ul li
    {
    	width: 250px;
    	background: #1c293a;
    	color: #fff;
    	font-weight: bold;
    	padding: 4px 4px 5px 6px;
    	margin-top: 5px;
    }
    #leftcontent .inner ul li a
    {
    	color: #fff;
    	text-decoration: none;
    }
    #rightcontent { 
    	float: right;
    	color: #333;
    	margin: 0 0 5px 0;
    	padding: 10px;
    	/* height: 350px; */
    	width: 253px;
    	height: 100%;
    	display: inline;
    	/* background: #666666; */
    }
    #leftcontent .homeinner 
    {
    	clear: both;
    	width: 690px;
    	border: 1px solid #88abc9;
    	background: #ffffff;		
    }
    #rightcontent .homeinner 
    {
    	padding: 40px 0 0 0;
    	line-height: 1.5em;	
    }
    #rightcontent .homeinner img 
    {
    	float: right;
    }
    #rightcontent .homeinner ul
    {
    	line-height: 1.4em;
    	list-style: none;
    }
    #rightcontent .homeinner ul a:link, a:active, a:visited
    {
    	color: #747d86;
    	text-decoration: none;
    }
    #rightcontent .homeinner ul a:hover
    {
    	text-decoration: underline;
    }
    #rightcontent .options
    {
    	padding: 31px 0 0 0;
    }
    #rightcontent .options .box
    {
    	width: 253px;
    	height: 52px;
    	border: 1px solid #88abc9;
    	background: #ffffff;
    	margin-bottom: 10px;
    }
    
    #rightcontent .quicklinks
    {
    	position: absolute;
    	bottom: 0;
    }
    #rightcontent .divider 
    {
    	clear: both;
    	margin: 10px 0 10px 0;
    	border-bottom: 1px dashed #000;
    }
    #quicklinks { 
    	clear: both;
    	margin: 25px 0 5px 0;
    	color: #fff;
    	padding: 5px 0 0 25px;
    }
    
    #quicklinks a { 
    	color: #ffffff;
    }
    
    #ql1 
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	margin: 0 5px 10px 0;
    	/* border: 1px solid #747D86; */
    	background: url('../media/32/ql1.jpg') no-repeat top left;
    }
    
    #ql2
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	margin-right: 5px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/37/ql2.jpg') no-repeat top left;
    	
    }
    
    #ql3
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	margin-right: 5px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/42/ql3.jpg') no-repeat top left;
    }
    
    #ql4
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/47/ql4.jpg') no-repeat top left;
    }
    .qlheader 
    {
    	padding: 0 2px 2px 5px;
    	font-size: 12px;
    }
    
    
    #rightquicklinks  
    {
    	clear: both;
    	display: block;
    	vertical-align: bottom;
    }
    
    
    #rightql1 
    {
    	clear: both;
    	float: left;
    	width: 120px;
    	height: 100px;
    	margin: 0 13px -5px 0;
    	/* border: 1px solid #747D86; */
    	background: url('../media/63/ql1.jpg') no-repeat top left;
    }
    
    #rightql2
    {
    	float: left;
    	width: 120px;
    	height: 120px;
    	margin: 0 0 -5px 0;
    	/* border: 1px solid #747D86; */
    	background: url('../media/68/ql2.jpg') no-repeat top left;
    	
    }
    
    #rightql3
    {
    	clear: both;
    	float: left;
    	width: 120px;
    	height: 100px;
    	margin-right: 13px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/73/ql3.jpg') no-repeat top left;
    }
    
    #rightql4
    {
    	float: left;
    	width: 120px;
    	height: 100px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/78/ql4.jpg') no-repeat top left;
    }
    .rightqlheader 
    {
    	padding: 2px 2px 3px 5px;
    	font-size: 12px;
    	color: #fff;
    }
    .rightqlheader a:link, a:active, a:visited, a:hover
    {
    	color: #fff;
    	text-decoration: none;
    }
    #footer   
    {
    	clear: both;
    	padding: 2px;
    	font-size: 0.8em;  
    	border-top: 1px solid #88abc9;
    	color: #747D86;
    	text-align: right;
    }  
    #footer a:link, a:active, a:visited 
    {  
    }      
    #footer p 
    {  
    	padding: 24px;  
    }  
    .clear 
    {  
    	clear: both;  
    }
    If anyone can spot something obvious that I've missed I'd be really grateful!

    Thanks,
    Rachel

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I was missing an end div tag - all working again now....thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •