CSS - Special Layout

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

hi,
tried searching for a vertical menu that opens sub menu immediatley below it (and not to the left side as a layer) but none
of the publicaly available menus do it. The menu items on the main level also have a specific icon for each of them. can you say how to do this menu?. if somebody has already made this menu and is publically available that would be nice too.
thank you

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

heyya,

I'm doing a quick layout, and I'm running into some problems with my floating menu.
Code:

<!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">

 <head>
	<style type="text/css">
		body {
			margin:0;
			padding:0;
			background-color:white;
			font:normal 1em/150% Verdana,Arial,sans-serif;
		}
		#container {
			width:750px;
			padding:0;
			margin:0;
			background:#FAA;
		}
		#contents {
			width:566px;
			margin:10px 0 0 162px;
			border:1px solid #999;
			border-bottom:none;
			padding:10px;
			background:#FFF;
		}
		#contents p {font-size:80%;line-height:150%;}
		#menu {
			width:160px;
			background:#FFA;
			margin:0;
			padding:0;
			float:left;
		}
		img {border:none}
	</style>
 </head>

 <body>
	<div id="container">
		
			<div id="menu">
				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
			</div>
			<div id="contents">
				<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>

				<h3>Welcome to mook</h3>

				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>

				<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
			</div>

	</div>
 </body>

</html>

readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case.

So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode.

TIA,

Greg

Hi there.

I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto

Thanks in advance

The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work?

Thanks

My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content.

I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS.

Code:

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #C10E0E;
}

#leftcolumn {
	display: inline;
	float: left;
	left: 15%; 
	width: 150px; 
}

#centercolumn {
	float: left;
	width: 511px;
	height: 100%;
	margin-left: 2px; 
	padding: 8px;
	border-left: 1px solid #494949;
	border-right: 1px solid #494949;
	background:  url(/images/bg.png) no-repeat top left;
	background-color: #FFDCAA;
}

#rightcolumn {
	float: left;
	width: 150px;
	margin-left: 1px; 
} 

#mainnav {
	width: 150px;
	padding: 0 0 0 0;
	font-size: 12px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #C10E0E;
	color: #FFDCAA;
}

#mainnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
		
#mainnav li {
	margin: 0 0 0 0;
	border-left: 7px solid #C10E0E;
	padding: 0 5px 0 0;
}

#mainnav li a {
	display: block;
	height: 15px;
	vertical-align: middle;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: #C10E0E;
	color: #FFDCAA;
	text-decoration: none;
	text-align: right;
}

html>body #mainnav li a {
	width: auto;
	padding: 0;
	margin: 0;
}

#mainnav li a:hover {
	background-color: #C10E0E;
	border-left: 7px solid #FFDCAA;
	color: #FFF;
	padding: 0;
	margin: 0;
}
	
#mainnav h3 {
	padding-left: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #F6D4A4;
	font-style: italic;
}

thanks!

Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie.

my code is

index.html

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <!-- container -->
 <div id="container">
   <!-- start wrapper -->
   <div id = "wrapper">
     <!-- start header -->
     <div id = "header">
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <!-- start nav -->
      <div id="nav">
        <ul>
	      <li><a href="#">Home</a></li>
	      <li><a href="#">About Us</a></li>
	      <li><a href="#">Search</a></li>
	      <li><a href="#">Contact Us</a></li>
	    </ul>
      <!-- end nav -->
      </div> 
     <!--end header --> 
     </div>
   <!-- end wrapper -->
   </div>
   <h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
  <!-- end container -->
 </div>

</body>
</html>

css file

Code:

/* general html element formatting */

html, body, table  {
  font-family: verdana, arial, sans-serif;
  font-size: 7pt;
  color: #000000;
  margin: 0;
  padding: 0;
}

body  {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6  {
  margin: 10px 10px 10px 0px;
  text-align: center;
}

h1  {
  font-size: 150%;
  margin-top: 0px;
}

h2  {
font-size: 130%;
}

h3  {
font-size: 110%;
}

h4  {
font-size: 100%;
}


h5  {
font-size: 100%;
color: #FFFFFF;

}


#container {
	
	background-image: url(images/background_gradient2.jpg);
	border: 1px solid #000000;	
}

#wrapper {
	width: 760px;
	height: 600px;
	background-color:#FFFFFF;
	margin:10px auto;
	border: 1px solid #000000;
	text-align: left;
}

#header {
    width: 760px;
    background: #242424;
}

#nav {
	border-bottom: 1px solid #000000;
}

#nav ul {
	padding: 0;
	margin: 0;
	background-color:#242424; 
}

#nav ul li {
	display: inline;
	padding: 0;
	margin: 0;
}

#nav ul li a {
	font-size: 120%;
	color: #FFFFFF;
	background-color:#778899;
	text-decoration: none;
	padding: 0px 25px 0px 25px;
	border-right: 0px solid #000000;
	text-align: center;
	width: 9em;
}

#nav ul li a:hover, #nav ul li a:focus {
	background-color: #990000;
}

please find attached a screenshot in firefox. Any help is appreciated.

thanks!

I am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path...

http://jjs5327.aisites.com/IMD311/index.html

Code:

@charset "UTF-8"; 
/* CSS Document */  
body { 	
background-color:#FFFFFF; 	
text-align:center; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#000000; 	
} 	 

#site { 	
width:775px; 	
height:500px; 	
margin:25px auto 0 auto; 	border:none; 	
} 	 
#container {     
width:775px;      
height:500px;      
margin:0 auto 0 auto;      
border:1px solid #99CCCC;  	
} 	 
#header, img { 	
margin-top:10px; 	
border:none; 	
cursor: default; 	
} 	 
#left { 	
width:210px; 	
height:208px; 	
margin-top:80px; 	
margin-left:20px; 	
border-top:1px solid #99CCCC; 	
border-right:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
float:left; 	
clear: both;  	
}	 	 
#menubar, #menubar p { 	
background-color:#FFFFFF; 	
text-align:left; 	
margin:auto; 	
} 	 
#menubar a { 	
display:block; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#FF9933; 	
text-decoration:none; 	
padding: 7.1px 0px 7.21px 10px; 	
border-bottom:1px solid #99CCCC; 	
cursor:default; 	
} 	 
#menubar a.active { 
color:#99CCCC; 	
} 	 	 
#menubar p:hover a, #menubar a:focus, #menubar a:active { 	color: #FFFFFF; 
background-color: #99CCCC; 	
} 	 
#right { 	
width:520px; 	
height:390px; 	
margin:15px 40px 15px 255px;  	
border-top:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
} 	 
#headline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	
font-size:14px; 	
text-align:center; 	
margin-top:60px; 	
} 	 
#content { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:380px; 	
margin:10px 60px 10px 60px; 	
padding:5px; 	
line-height:20px; 	
} 	 
#sumheadline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	font-size:14px; 	
font-style:italic; 	
text-align:left; 	
margin:60px 0 0 90px; 	
} 	 
#sumcontent ul{ 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
list-style:disc; 	
text-align:left; 	
width:250px; 	
padding:10px; 	
margin-left:150px; 	
line-height:20px; 	
} 	 
#techcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 
text-align:left; 	
width:380px; 	
margin:60px 60px 10px 60px; 	
line-height:20px; 	
} 	
 .tech2 { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#expcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:460px; 	
height:330px; 	
margin:59px 30px 10px 30px; 	
line-height:20px; 	
overflow: auto; 	
}  	
 .exp2left { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#gencontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:490px; 	
height:385px; 	
margin:15px 10px 10px 15px; 	
line-height:22px; 	
} 	 
.deshead { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 
font-style:italic; 	
margin-left:115px; 	
padding-top:10px; 	
} 	 
.description { 	
width:350px; 	
margin-left:115px; 	
} 	 
#example { 	
overflow-y:scroll; 	
overflow-x:hidden; 	
height:389px; 	
width:519px; 	
} 	 
#example1 img, #example2 img, #example3 img, #example4 img { 	float:left; 	
} 	 
#example1 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example2 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example3 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example4 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
}  	 
#content li { 	
padding:5px; 	
} 	 
#footer { 	
color:#999999; 
font-family:Arial, Helvetica, sans-serif; 	
font-size:10px; 	
text-align:right; 	
width:775px; 	
height:20px; 	
margin-top:5px; 	
}

..

Need help with layout, picture attached. I need the footer's end to be at the level of the sidebars end unless content is too long and in that case it would expand in height. In other words there has to be a min height for content so footer wont go any higher than in the picture, but will go down if content expands.

Any tips on how this needs to be done?

Ok I've been stuck on this layout for about 2 days and I've had it. I was wondering if someone would be willing to help me with it through AIM or MSN messager. Also if no one is willing to help I'm willing to pay someone 30-40$ to code the layout for me in CSS so it works in Firefox and IE. I pretty much just need the stylesheet or the one on one help to make it work. If you're willing to help me IM ME at stareatceiling or MSN: ajay@statc.net . It'd be cool to have this done tonight or tommorow so i can start developing the backend for it. Thanks.

So I'm trying to get a semi-liquid layout that has the side benefit of allowing the HTML page content to be organized in a way that losing the stylesheet won't kill it.

Ideally, the HTML page would be:

LOGO
BREADCRUMBS
CONTENT
MENU
RIGHTSIDE CONTENT
FOOTER

Unfortunately, I've had to move the rightside content up in the page order since I can't seem to configure my CSS in a way that makes it work the other way.

This is as far as I've gotten, and I can't get the footer to properly begin at the end of the longest element. I know it's a side effect of the absolute positioning of the Logo and Menu, but I can't think of a way to layer this stuff any better.

Help! If you can help me get this up and running, I'll be sure to thank you and hit you back with a link on my site when it's done.

Since I can't link directly to anything yet, here's the image of what the layout should look like. I want the footer to fall under the scroll bar if there is one, I don't want a ever-present footer.

Code:

www.ctechsinc.com/temp3/mockupb.gif

Code:

* {
	padding-left: 0px;
	margin:0px;
	}

table {
	border-collapse:collapse;
}

img {
	border:none;
}

#container
	{
	width:100%;
}

.logo {
	float: left;
	height: 260px;
	width: 200px;
	background-color: #0099CC;
	}

.menu {
	background-color: #996699;
	width: 200px;
	height: 150px;
	float: left;
	position: absolute;
	top: 260px;
	left: 0px;
	}
	
.greenwrap {
	background-color: #006633;
	margin-left: 230px;
	margin-top: 10px;    /* this can be deleted once implemented; it's only here to help align things */
	}

.breadcrumb {
	background-color: #99CCCC;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}

.content {
	min-width:220px;
	height:100px;
	background-color: #00CCCC;
	float: left;
	}
	
.contentwrap {
	background-color: #00FF99;
	float: left;
}

.sidebar {
	width: 200px;
	background-color: #3399FF;
	float: none;
	right: 0px;
	position: absolute;
	}
	
.box1 {
	background-color: #00FFFF;
	min-width:220px;
	margin-top: 20px;
	margin-right: 220px;
	margin-bottom: 20px;
	margin-left: 20px;
	}

.qlink {
	margin: 20px;
}

.footer {
	margin:0px;
	width: 100%;
	float: left;
	clear: none;
	}

Code:

<html>
<head>
<link href="screen2.css" rel="stylesheet" type="text/css">
</head>
<body>

<div>
	<div class="logo">

	Logo
	</div>
</div>

<!-- content, RH -->
<div>
  <div class="greenwrap">

		<div class="breadcrumb">
   <h1>BREADCRUMBS</h1><br>
    	</div>

<!--    		<div class="content">  -->
            
            <div class="contentwrap">

				<div class="box1">

				<h2>heading!</h2>

            <p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. 
            </p>

				</div>

				<div class="box1">

				<h2>heading!</h2>

            <p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. 
            </p>

				</div>



            </div>
            
            <div class="sidebar">
            
            	<div class="qlink">
             <p>boring content boring contentboring content boring contentboring content boring contentboring content boring contentboring content boring content
             	</p>
                </div>
            </div>
        
<!--			 </div>  -->
            



  </div>
    
<div class="menu">
<p>Menu</p><p>Menu</p><p>Menu</p>
</div>

<div class="footer">
<p>Fooooooooooooooooooooooooooooooooooooooterrrrr!</p>
</div>

</div>



<!-- menu -->

</body>
</html>