CSS - Need Help With Css - Center Of Screen, 3 Column Layout With Footer.

Hey,
So I have a three column layout being implemented as such:

html:
Code:

<div class="content">
    <div class="col1 column"></div>
    <div class="col3 column"></div>
    <div class="col2 column">
        <div class="header">Header</div>
    </div>
</div>

CSS:
Code:

.column {
padding: 10px;
position:relative;
}

.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}

.col1 {
float: left;
width:250px;
}

.col2 {
margin-left: auto;
margin-right: auto;
}

.col3 {
float:right;
width:250px;
}

The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks.
--Surgery

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?

Hi All,

This is my first post in CSS forums.
I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements).

Note: User may have scrolled down the screen. I hope this is possible with CSS

I have been looking for this all over the place but cant find the right solution.

I want a div aligned like it's on this website.

Code:

http://www.captaincrawl.com/

1. It's aligned in the center/middle of the screen
2. It's relative so it moves according to the window size
3. It should work on major browsers such as IE

Can anyone help me please?

If I have a bunch of <div>'s floated here and there to form the layout of my page, if I want to have my design centered on the screen do I have to wrap the whole thing in a another pair of div's, ie <div align="center">...</div> ?

I created a footer that sits on the bottom of the screen using this code:

.footer {
padding-top:5px;
margin-top:5px;
font-size:8pt;
color:#FFFFFF;
position:absolute;
bottom:0px;
background-image:url('gfx/bg-bottom.jpg');
height:22px;
width:100%;
}


It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he

http://www.juiceboxseo.com/do-it.php

Is there a way to make sure it stays on the bottom?

I don't know if this is a weird question or not, but this is what I was thinking of doing...

I was going to build my footer to extend a couple hundred pixels below the actual footer content, then use a png with transparency gradient to blend the bottom of the footer back into the page background to account for pages with very limited content on them where the footer may not be close to the actual bottom of the browser window.

The problem I ran into when trying to do this was trying to stop the page from including the bottom of the footer on longer pages when there WAS enough content to push the footer to the bottom. I tried a couple different ways, setting various div positions and sliding them off screen, but they just causes the browser to stretch farther to display the entire footer.

So, is this something you can do? I seem to remember playing around with a 'sticky footer' a little while back that moved content off screen, but I don't remember what caused this.

Thanks for any help.

Hello all,
just when I thought IE6 and all its quirks was behind us I am faced with a very strange issue that can only be replicated in one version of IE8 that a client has... You'll find attached a layout with header, middle content area that stretches to fill remaining space (and has a background image that uses JQuery bgstretcher to fill its background with an image), and a footer that just stays at the bottom in IE7, IE8 and FF. Problem is, that in a client's PC with Explorer 8 that same footer is not a small stripe but it goes way up into the content area and takes up 1/3 of the screen space at the bottom. I can't replicate this in any of my IE7s or IE8s I looked around and I'm going mad. Is there something in the CSS that I could maybe take out or change or does someone know of any IE8 bug? Thanks.

All html + css is here (208K pls remove gaps to get link):
www . sendspace . com / file / ool8zx

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

I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV.

I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height!

Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however.

I have attached an image to help with my probably confusing explanation!

I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers.

If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have.

Thanks
R

Hello!

I'm new to CSS, so any help would be greatly appreciated!

I'm working on this page:
sugarhooker[dot]com/testing/index2.html
*The CSS is included in the head

The right column is suppose to start where it says 'Are you hooked...'
It should be right underneath the navigation bar. Anyone know what I'm doing wrong?

Thanks in advance!

I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer.

I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written.

I want to avoid images but other than that any help would be great!

I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!).


Thanks

HTML:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drivers Jonas Information Unit</title>
<meta name="keywords" content="1" />
<link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" />
<link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" />
</head>
<body>
<div id="top">
<div id="picture">
<img src="GIF.gif" alt="DJ" width="200" height="100" />
</div>
<div id="heading">
<div id="title"><h1>Drivers Jonas Information Unit</h1></div>
</div>

</div>
<div id="left">
<br/><p><a href="about.html">About us</a></p><br/>
<p><a href="company.html">Company Information</a></p><br/>
<p><a href="legal.html">Legal information</a></p><br/>
<p><a href="landreg.html">Land Registry</a></p><br/>
<p><a href="research.html">Research</a></p><br/>
</div>
<div id="right">
<div id="title"><h2> News
</h2></div>
<ul>
<li>The Information Unit has recently acquired a set of new APC guides</li>
<li>If you would like any training on databases</li>
<li>The Information Unit has created an economy timeline </li>
</ul>
</div>

<div id="main">
<div id="title"><h2>Main stuff</h2></div>
<p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p>
<p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p>
<p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p>
</div>
<div id="bottom">
Drivers Jonas Information Unit
</div>
</body>
</html>

CSS:

#top
/*DJ logo and page title - includes h1*/
{
color: black;
font-family: arial, sans-serif;
font-size: 20px;
background: #d31145;
padding-bottom: 15px;
}

body
{
color: black;
font-family: arial, sans-serif;
font-size:14px
}

img /*DJ logo*/
{
padding: 20px;
float:left;
}

#heading
{
text-align: center;
padding:20px;
}

/*main page title*/
/*should change all reds to DJ red: #d31145*/

#left, #right, #main
{
color: white;
background: black;
}

#left
{
float: left;
width:140px;
border-right:2px solid #d31145;
text-align:left;
padding-left: 1em;
}

#right
{
float:right;
width:140px;
border-left:2px solid #d31145;
text-align:left;
padding-right: 1em;
}

#main
{
margin-left: 150px;
margin-right: 150px;
border-left: 1px solid;
border-right: 1px solid;
padding: 1em;
}

#bottom
{
clear:both;
margin: 0;
color:black;
background: #d31145;
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
}

#title
{
text-align:center;
}

a:link {color:white}
a:visited {color:silver}
a:hover {color:#d31145}
a:active {color:#d31145}

Hi,

http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE.

Any help would be greatly appreciated.

Thanks.

Janusz Jasinski

Greetings,

I have the following in a style sheet:

Code:

.nameColumn {
width: 200px;
}

.groupColumn {
width: 100px;
}

.statusColumn {
width: 682px;
}

In the body of the page, I have table rows like this:

Code:

<tr>
<td class=nameColumn>foo</td>
<td class=groupColumn>bar</td>
<td class=statusColumn>foobar</td>
</tr>

Even though I have declared widths, they show up differently on Windows IE7 than on Mac Safari. In IE, the "statusColumn" column falls short of the right edge of the window. Is there a way, with the width property, to make the rightmost column automatically stretch to the right edge of the browser window?

If I use width:auto, it makes the cell only as wide as the text it contains.

Thanks!!
DM

I've been working on a CSS style for a web site, and I've got a small issue with the right hand column not staying within the bounds of the screen. When using a tool to see where the div's borders the right is about 200 px going off the right of the screen, making the screen horizontally scrolling.

I am not a CSS expert. I know enough to get around, but this I don't understand.

(I might have posted too much, but I figured if someone needed something more, it's already all there.)

Thanks for any assistance that can be provided.

HTML
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Experience Inc. - Warren and Forest Counties Office of Aging</title>
<link href="css/grey_style.css" rel="stylesheet" type="text/css">
</head>
<body>
	
	<div id="header">
		<span style="float:left;">
			<img src="images/logo.gif" />			
		</span>
		<span style="float:right;">
			<div style="text-align:center">
				<div id="outerFirst"><a href="index.php"><span>Home</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Services</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Senior Centers</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>Trips / Events</span></a></div>
				<div id="outerFirst"><a href="index.php"><span>About / Contact</span></a></div>
			</div>						
		</span>
	</div>
<div class="CellBackGround">
	<table width="100%">
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
<div id="pictureContainer">
	<div id="largeHomeText">
		Warren and Forest Counties Area Agency on Aging
	</div>
	<div class="together">	
			<img src="images/home_image_bar/image1.jpg" />
			<img src="images/home_image_bar/image2.jpg" />				
			<img src="images/home_image_bar/image1.jpg" />			
	</div>
</div>

<div class="CellBackGround">
	
</div>

	<div id="wrapper">
		<div id="content">
			&nbsp;
		</div>
	</div>
	<div id="navigation">
		<p>
		&nbsp;
		</p>
	</div>
	<div id="extra">&nbsp;

        </div>

	<div id="footer">
		<p>This is the footer area. </p>
	</div>

</body>
</html>

CSS
Code:

body {
	font-family: "Times New Roman", Times, serif;
	font-size: 12pt;
	font-style: normal;
	font-weight: normal;
	color:#FFFFFF;
	background-color:#666666;
	margin-left:0;
	margin-top:0;
	margin-right:0;
}

#header {
	width: 100%;
	background-color: #666666;
	overflow:auto;
	vertical-align:top;
	height:auto;
}

#menu {
	height: 54px;
	margin: 3em 0; 
	padding:0 1em;
	border-bottom: 0px solid black;
	overflow:inherit;
}

#outerFirst {
	float: left;
	width: 90px; 
	height: 130px;
	margin: 0 0px 0 0;
	background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
	
#outerFirst a {
	cursor: pointer;
	display: block;
	margin: 0; padding:0;
	width:90px; 
	height:54px;
	overflow:hidden;
	font-family: Arial;
	font-size:0.7em;
	font-weight:normal;
	color:#FFFFFF;
	text-decoration: none;
	background: url( '../images/greyFirst.gif' ) top left no-repeat;
}

#outerFirst span {
	height: 54px;
	display: block;
	margin:0; 
	padding: 25px 0px 0px 0px;
	}
#outerFirst a:hover {
	width:90px; 
	height:54px;
	background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
	color: yellow;
	}
#outerFirst a:active {
	background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
	}

.CellBackGround {
	height:2px;
	background: url('../images/redPixel.gif') center center;
}
.CellBack2 {
	background: url('../images/redPixel.gif') center center;
}

#pictureContainer {
	width:100%;
	background-color:#666666;	
	overflow:auto;	
	height:95px;
}

#largeHomeText {	
	color:#999999;
	font-size:13pt;	
	float:left;
	padding-top:74px;
	padding-left:3px;
	
}

.together img {  
	padding: 0;	
	margin: 0;	
	border: 0;	
	display: inline; 
	float: right;
	overflow:hidden;
} 

#mainTextContaner {	
	color:#660000;
	margin-left:-5px;
}

#footer {	
	color:#666666;	
}

/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 45%;}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl2 {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 35%;}
.br2 {background: url(../images/br.gif) 100% 100% no-repeat}
.tl2 {background: url(../images/tl.gif) 0 0 no-repeat}
.tr2 {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}

a:link {
	font-size: 14pt;
	color:#999999;
}

a:hover {
	font-size: 14pt;
	color:#660000;

}
a:visited {
	font-size: 14pt;
	color:#999999;
}

#news {
	background: url(../images/news.jpg) 100% 0 no-repeat;
	width:370px;	
	height:600;	
}
div#wrapper{
	float:right;	
	margin-right:-30%;
	width:99%;
}
div#content{
	margin-right:30%;
	border-left:2px solid #FFFFFF;
	border-left-color:#660000;
	padding-left:10px;
	padding-right:10px;
	height:400px;
	padding-top:10px;	
}
div#navigation{
	float:left;
	width:32.9%;
	padding-top:10px;
}
div#extra{
	float:left;
	clear:left;
	width:32.9%;
	padding-top:10px;
}

p{
	margin:0 10px 10px
}

div#footer{
	clear:both;	
	border-top:2px solid;
	border-top-color:#660000;	
	border-bottom:2px solid;
	border-bottom-color:#660000;
	text-align:left;
	color:#FFFFFF;

}
div#footer p{
	margin:0;
	padding:5px 10px;
	width:10%;
}