Go Back   SitePoint Forums > Forum Index > Design Your Site > Web Page Design > CSS
Reload this Page Canmt get a 2 column to sit under a 3 column layout :-(
Newsletter FAQ Members List Calendar Mark Forums Read

New to SitePoint Forums? Register here for free!

SitePoint Sponsor
 
 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old Nov 10, 2009, 07:28   #1
Zygoma
SitePoint Addict
 
Zygoma's Avatar
 
Join Date: May 2006
Location: York, Uk
Posts: 362
Canmt get a 2 column to sit under a 3 column layout :-(
Really thought I could crack this problem my self but alas I surrender :-(

The problem is on this page -
http://www.pauserefreshment.co.uk/go...chines_ad.html

You'll notice test left test right text. This is the problem area. I just wanted to create a clean 2 column layout underneath the 3 column layout. I beleive this is the offending css -
#testimonial_left {
float:left;
width:48%;
overflow:hidden;
background-color: #fff;
border-top: 0px solid #702453;
color:#622449;
font-weight:bold;
}


#testimonial_right {
margin-left:200px;
}

Please If possible could someone explain why my attemps have fallen short. Thank you :-)

Code:
body {
	margin:0;
	background:url(../images/bg-body.gif) repeat-x 0 0;
	font:11px Arial, Courier, Helvetica, sans-serif;
	color:#712453;
	min-width:985px;
}

img {
	border:none;
	display:block;
}
a {
	color:#702453;
	text-decoration:underline;
}
a:hover {
	text-decoration:underline;
}
#pagewidth {
	width:985px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#header {
	height:130px;
	width:985px;
	overflow:hidden;
	
}
#header p {
	margin:0;
	position:absolute;
	top:13px;
	left:18px;
}
#header p a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	width:207px;
	height:103px;
	background:url(../images/logo_go_home.gif);
}
#header ul {
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:12px;
	left:244px;
}
#header ul li {
	float:left;
}
#header ul li a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	height:145px;
	background-image:url(../images/text-topnav9.jpg);
	background-repeat:no-repeat;
}
#header ul li a.who {
	width:91px;
	background-position:0 0;
	margin:0 12px 0 0;
}
#header ul li a.our {
	width:93px;
	background-position:-91px 0;
	margin:0 7px 0 0;
}
#header ul li a.happy {
	width:105px;
	background-position:-184px 0;
	margin:0 5px 0 0;
}
#header ul li a.come {
	width:103px;
	background-position:-289px 0;
	margin:0 9px 0 0;
}
#header ul li a.useful {
	width:93px;
	margin:0 14px 0 0;
	background-position:-392px 0;
}
#header ul li a.on-line {
	width:94px;
	margin:0 13px 0 0;
	background-position:-485px 0;
}
#header ul li a.show {
	width:95px;
	background-position:-579px 0;
}
#main {
	width:100%;
	overflow:hidden;
}

#zoom {
width:0;
padding-top:3px;
float: left;
}



/* content 2 */

#content_2 .h3 {
padding:0px;
font-size:1.5em;
color: #B5B43E;
text-decoration:none;
}

#content_2 .h32 {
padding:0px;
font-size:1.5em;
color:#2B832C;
text-decoration:none;
}

#content_2 .h2 {
padding: 0;
margin: 0;
font-size:1.5em;
text-decoration:none;
color:#2B832C;
}

#content_2 .orange {
padding: 0;
margin: 0;
font-size:2em;
text-decoration:none;
color:#D68126;
}

#content .orange {
padding-top:5px;
margin: 0;
font-size:2em;
text-decoration:none;
color:#D68126;
padding-bottom:3px;
}

#content .orange2 {
padding-top:10px;
padding-bottom:3px;
margin: 0;
font-size:2em;
text-decoration:none;
color:#D68126;
}


#content_2 .type {
font-family:"Courier New" Courier monospace;
}

#content_2 .h1 {

padding-bottom:0px;
margin:0;
font-size:2em;
text-decoration:none;
}
#content_2 .h1footer {

padding-bottom:10px;
margin:0;
font-size:2em;
text-decoration:none;
}
#content_2 .h4footer {
padding-bottom:10px;
margin:0;
font-size:2em;
text-decoration:none;
font-family:"Courier New" Courier monospace;
}

#content_2 .homefooter {
padding-top:20px;
padding-bottom:20px;
margin:0;
font-size:2em;
text-decoration:none;
font-family:"Courier New" Courier monospace;
}


#content_2 a:link {color: #622449; text-decoration: none}
#content_2 a:visited {color: #622449; text-decoration: none}
#content_2 a:hover {color: #D68126; text-decoration: underline; font-size: 100%;
font-weight:900; }


#content_2 li {   
      font-size:1.5em;  
} 

#content_2 ul .clear {
list-style-type: none;
font-weight:bold;
}

#content_2 a img {
height:94px;
width:125px;
border:0px solid #000; 
padding-left:20px;
margin-bottom:120px; 
} 

#content_2 .left {
	float:left;
	width:75%;
	padding:0 0 28px;
}

#content_2 .free
  {
    float:left;
	padding-right:3px;
  }
  
 #content .productpic
  {
    float:left;
	padding-right:3px;
  }
   
 
#content_2 p {
font-size:1.5em;
margin-bottom: 15px;
}
  
/* content 2 ends */



#content p {
font-size:1.5em;
padding-right:2px;
}

#content .left {
	float:right;
	width:77%;
	padding:0;
}

#content .h2 {
padding:0px;
font-size:15px;
color: #B5B43E;
}

#content .hotel {
padding:0px;
font-size:15px;
color: #B5B43E;
}


#content .h3 {
padding:0px;
font-size:15px;
color: #B5B43E;
text-decoration:none;
}

#content .type {
font-family:"Courier New" Courier monospace;
}


#content .call {
padding-top: 5px;
}

.home {
margin-left: 5%;
}


#content a img {
height:94px;
width:125px;
border:0px solid #000; 
padding-left:20px;
margin-bottom:120px; 
} 

/* disabled
#content a:hover img { 
width:300px; 
height:225px; 
} 
*/
/* The rule below makes the effect work in IE */ 
#zoom a:hover { 
padding-left:0px;
} 

/* End Photo Zoom CSS */


/* * html #content .right {
            padding:85px 0 0 28px;
} */
#content p {
	margin:16px 0 0;
}
.image {
	margin:0 0 0 -28px;
}
/*
Regular side bar
*/
#sidebar {
	float:left;
	width:225px;
	padding:0;
}

#sidebar .pic {
		padding-bottom:50px;
		padding-top:50px
}

#sidebar ul {
	margin:0;
	padding:0;
	list-style:none;
	width:225px;
	overflow:hidden;
}
#sidebar ul li {
	width:225px;
	overflow:hidden;
	float:left;
	margin:4px 0 0;
}
#sidebar ul li a {
	width:225px;
	overflow:hidden;
	display:block;
	text-align: right;
	font:14px "Arial", Courier New, San-serif;
	line-height:18px;
	color: #884970;
}
#sidebar ul li.activeblue a {
	background: #702453;
	text-decoration: none;
	color: #6ecee4;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #6ecee4;
}
#sidebar ul ul li.activeblue2 a {
	text-decoration: underline;
	color: #6ecee4;
}
#sidebar ul ul li a:hover {
	text-decoration: underline;
	color: #6ecee4;
}
#sidebar ul li.activeyellow a {
	color: #fece49;
	background: #702453;
	text-decoration: none;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #fece49;
}
#sidebar ul li.activeyellow2 a {
	text-decoration: underline;
	color: #fece49;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #fece49;
}
#sidebar ul li.activeorange a {
	text-decoration: none;
	background: #702453;
	color: #f6872d;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #f6872d;
}
#sidebar ul li.activeorange2 a {
	text-decoration: underline;
	color: #6ecee4;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #f6872d;
}
#sidebar ul li.activepink a {
	text-decoration: none;
	background: #702453;
	color: #dd5762;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #dd5762;
}
#sidebar ul li.activepink2 a {
	text-decoration: underline;
	color: #6ecee4;
}
#sidebar ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #dd5762;
}
.sidebar ul li a dotsblue {
	color: #6ecee4;
	font-weight: bold;
}
#sidebar ul li a em {
	color: #fece49;
	font-weight: bold;
}
#sidebar ul ul {
	margin:0;
	padding:6px 13px 12px 0;
	list-style:none;
	width:212px;
	text-align:right;
	line-height:18px;
	border-top:1px solid #fff;
	background:#f0e9ed url(file:../images/separator.gif) repeat-x 0 100%;
}
#sidebar ul ul li {
	float:none;
	width:auto;
	margin:0;
}
#sidebar ul ul a {
	text-indent:0;
	height:auto;
	width:auto;
	color: #702453 !important;
	display:inline;
	font:12px Arial, San-serif !important;
	background:none !important;
}
#sidebar ul ul a:hover {
	text-decoration: underline;
}
#footer {
	height: 30px;
	width: 985px;
	overflow:hidden;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	border-top: 1px dotted #333;
}

#footer ul {
	margin: 10px 0 0 240px;
	padding: 0;
}

#footer ul li {
	list-style: none;
	float: left;
}

#footer ul li a {
	display: block;
	overflow:hidden;
	font:10px;
	line-height:18px;
	color: #884970;
	padding: 0px 10px 0px 10px;
	border-right: 1px solid #aaa;
}
#footer ul li a:hover {
	background: #702453;
	text-decoration: none;
	color: #fece49;
}

#content h2 {
padding:0;
margin:0;
color:#B5B43E;
}

#content h1 {
margin:0;
padding-top:25px;
}

#content .h1 {
padding-top:0px;
padding-bottom:0px;
margin:0px;
}

#content h3 {
margin:0;
padding-top:5px;
color:#B5B43E;
text-decoration:underline;
}



#content .cart2
  {
    display: block;
    width: 69px;
    height: 54px;
    background: url("../images/shopping_cart.jpg") no-repeat 0 0;
  }
#content .cart2
 {
 margin-left:80%;
 margin-top:20px;

  }
  
#content .cart2:hover
  { 
    background: url("../images/shopping_cart_go.jpg") no-repeat 0 0;
  } 

#content a:link {color: #622449; text-decoration: none}
#content a:visited {color: #622449; text-decoration: none}
#content a:hover {color: #D68126; text-decoration: underline; font-size: 100%;
font-weight:900; }

#thumnails .pics li {
    float: left;
    width: 10em;
	list-style:none;
	padding: 2%;
}


#content .free
  {
    float:left;
	padding-right:3px;
	margin-bottom:5px;	
  }
  
  
  #content .freextra
  {
    float:right;
	margin-right:10px;
  }
 
  
#content li {
font-size:1.5em;
margin: 0;
padding-left: 0;
}


#content ul li {
  margin-left: 0;
  padding: 2px 0 2px 16px;
  list-style: none;
  background: url('../images/green/tick.jpg') no-repeat top left;
}

#content ul {
padding-left: 150px;
}


#content li.eco  {
font-size:1.5em;
margin: 0;
padding: 0;
}


#content ul li.eco  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/recy_icon.jpg') no-repeat top left;
}

#content ul li.eco2  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/power.jpg') no-repeat top left;
}

#content ul li.eco3  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/low_energy.jpg') no-repeat top left;
}

#content ul li.eco4  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/fairtrade.jpg') no-repeat top left;
}

#content ul li.eco5  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/rain.jpg') no-repeat top left;
}

#content ul li.eco6  {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/organic.jpg') no-repeat top left;
}

#content ul li.eco7 {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/compass.jpg') no-repeat top left;
}

#content ul li.eco8 {
  margin: 0;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/bean.jpg') no-repeat top left;
}

#content ul li.eco9 {
  margin-left: 3px;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/terry.jpg') no-repeat top left;
}

#content ul li.eco10 {
  margin-left: 3px;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/az2.jpg') no-repeat top left;
}

#content ul li.eco11 {
margin-left: 3px;
  padding: 7px 0 7px 30px;
  list-style: none;
  background: url('../images/green/rubbish2.jpg') no-repeat top left;
}

#content ul li.eco12 {
margin-right: 3px;
  padding: 7px 0px 7px 30px;
  list-style: none;
  background: url('../images/green/heat13.jpg') no-repeat top left;
}

#content ul li.eco13 {
margin-right: 3px;
  padding: 7px 0px 7px 30px;
  list-style: none;
  background: url('../images/green/chef_taste.jpg') no-repeat top left;
}

#content ul li.eco14 {
margin-left: 3px;
  padding: 7px 0px 7px 30px;
  list-style: none;
  background: url('../images/green/chris_face2.jpg') no-repeat top left;
}

#content ul li.eco15 {
margin-left: 3px;
  padding: 7px 0px 7px 30px;
  list-style: none;
  background: url('../images/green/david_face2.jpg') no-repeat top left;
}



.style2 {
	color: #2B832C;
	font-weight: bold;
}

#leftcolumn
{
float: left;
width: 50%;
margin-top: 10px;
margin-bottom:20px;
}

#leftcolumn .watermachine 
{
float:left;
margin-top:5px;
}

#leftcolumn p 
{
margin-top:5px;
}

#rightcolumn p 
{
margin-top:5px;
}

#rightcolumn
{
margin-left: 50%;
border-left: 0px solid #622449;
margin-top: 10px;
margin-bottom:20px;
}

#rightcolumn .watermachine 
{
float:left;
margin-top:5px;
}

#content .print
{
color:red;
text-align:right;
padding-right:5px;
}

#sitemap ul {
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
}

#sitemap ul li {
font-size:1.1em;
font-family:Arial, Helvetica, sans-serif;
}

#sitemap h1 {
padding-left:10px;
}

#sitemap a:link {color: #622449; text-decoration: none}
#sitemap a:visited {color: #622449; text-decoration: none}
#sitemap a:hover {color: #D68126; text-decoration: underline; font-size: 100%;
font-weight:900; }

/* home page */   
#container_hp
{
width: 96%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 180%;
max-width: 1200px; 
min-width: 550px;
margin:2% auto;
}

#top_hp
{
padding: 0em;
border-bottom: 1px solid gray;
font-family:Arial, Helvetica, sans-serif;
height:190px;
background: #FFFFFF url(../images/model_filter/office_female_window4.jpg) no-repeat right center;
color:white;
font-size:1.5em;
line-height:90%;
font-stretch:extra-expanded;
}

#top_hp .floatleft {
float:right;
}

#top_hp h1
{
margin:0px;
color:#D68126;
padding:4px;
color:#D68126;
}

#leftnav_hp
{
float: left;
width: 28%;
margin: 0;
padding: 1em;
background: white url(../images/model_filter/waiter4.jpg) no-repeat top right;
}

#leftnav_hp img
{
float:left;
}

#content_hp img {
float:left;
}

#rightnav_hp
{
float: right;
width: 28%;
margin: 0;
padding: 1em;
background: white url(../images/model_filter/corporate_coffee3.jpg) no-repeat top right;
}

#rightnav_hp img {
float:left;
}


#content_hp
{
margin-left: 30%;
border-left: 1px solid gray;
margin-right: 30%;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
background: white url(../images/model_filter/shop_coffee2.jpg) no-repeat top right;
}


#footer_hp
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}



#content_hp .headerfont { 
font-size:2em;
padding:0px;
margin:0px;
color:#622449;
}

#leftnav_hp .headerfont
 {
font-size:2em;
padding:0px;
margin:0px;
color:#622449;
} 

#leftnav_hp .headerfont2
 {
font-size:2em;
padding:0px;
margin:0px;
color:#622449;
background: white url(../images/model_filter/shop_coffee2.jpg) no-repeat top right;
} 


#rightnav_hp .headerfont {
font-size:2em;
padding:0px;
margin:0px;
color:#622449
}


#emailUs
{
  display: block;
  width: 151px;
  height: 46px;
  background: url("../images/button/smiley_thumb.jpg") no-repeat 0 0;

}

#emailUs:hover
{ 
  background-position: 0 -23px;
  background: url("../images/button/smiley_thumb_green.jpg") no-repeat 0 0;
  }


#emailUs span
{
  display: none;
}

body.mp {
	background-image: none;
	background-color:#622449;
	color:#FFFFFF;
	min-width:985px;
	}

.parapump {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
}

.parapump2 {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
background: white url(../images/model_filter/hotel_coffee3.jpg) no-repeat top right;
}

.parapump3 {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
background: white url(../images/model_filter/shop_coffee3.jpg) no-repeat top right;
}

.parapump4 {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
background: white url(../images/model_filter/business_coffee.jpg) no-repeat top right;
}
/* home page footer start */  

 	.nav {
    margin:auto;
    border:1px;    
    height:60px;
    background:#A6AE1F;
    font:bold 88%/1.1 verdana;
	clear:both;
	overflow:hidden;
	}

 	.nav li {
    float:left;
    list-style:none;
	margin:5px;
	
		}
	
	.nav li a img {	
	margin:0 -5px;
	border:1px inset #66f;
	color:#ffffff
	background:;
		}

    .nav li a {
    float:left;
    padding:0 5px; 
    height:50px;
	line-height:50px;
    color:#ddd;
    text-decoration:none;
    text-transform:none;
	font-size:1.25em;
}
    .nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ffffff;
    background:;
}
/* home page footer end */  
/* home page ends*/   
a:link {color: #622449; text-decoration: none}
a:visited {color: #622449; text-decoration: none}
a:hover {color: #D68126; text-decoration: underline; font-size: 100% }

.hbloat {
font-size:2em;
font-weight:bold;
color:#622449;
}

#testimonial_left {
float:left;
width:48%;
overflow:hidden;
background-color: #fff;
border-top: 0px solid #702453;
color:#622449;
font-weight:bold;
}


#testimonial_right {
margin-left:200px;
}
Zygoma is offline   Reply With Quote
 

Bookmarks

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Threaded Mode Threaded Mode

 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Sponsored Links
 
Forum Jump


All times are GMT -7. The time now is 23:30.


Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Copyright 1998-2009, SitePoint Pty Ltd. All Rights Reserved