CSS - Can't Get Column To Take Up Full Height In Layout.

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?

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

Hi all!

After trying more then a few things I'm about to give up, so I hope someone here has the answer.

The problem is the following:
* A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage.
* All three columns should have the same length as the longest column.
* When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen.

Point 2 is doable.
Point 3 is doable.
But the combination of point 2 and 3 seems quite hard.

Hope someone has an idea .

Thanks!

can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it?

is this possible, cheers

heres my css:
left column, is #leftNav and the right column is #contentMain

PHP Code:
#content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 632px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    } 

I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page.

I have
height: 100%;
in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch?
I have tried height: auto; but that doesnt work either.

Hi,

I am trying to better understand how column heights are displayed, and how to create full height columns.

On this page http://tapmeister.com/layout_test/index.html, the column which drives the height of the page is <div id="main">, and the left and right columns do not span the entire column height, and the red <div id="content"> shows at the bottom of both side columns.

On this page http://tapmeister.com/layout_test/index2.html, I put less stuff in the center <div id="main"> so it wouldn't drive the height of the page. The green <div id="main">, however, did cover the entire column unlike the left and right column on the earlier page.

Can anyone help me understand what is going on, and why one column has full height color yet not the other one?

Also, what is the best way to make the left and right column have full height color? I know I can apply a repeating background graphic to <div id="content"> which mimics the appearance of the left and right column, however, it would be nice to do differently if possible.

My code is listed below (sorry about the ugly colors!)

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>

<style type="text/css">

* {margin: 0; padding: 0;}

body {background-color: olive;}

#wrapper
{
  width: 100%;
  background-color: blue;
  margin: auto;
}

#main
{
    margin: 0 180px;
    background-color: green;
}

#content {background-color: red;}

#side1
{
  width:180px;
  float:left;
  background-color:yellow;
}
  
#side2
{
  width: 180px;
  float:right;
  background-color:yellow;}
  
#footer
{
  clear:both;
  background-color:lime;
  border-top: 10px solid black;
}

#header {background-color: purple;}

.clear
{
  clear:both;
}

</style>
</head>

<body id="page_bg">
    <div id="wrapper">
        <div id="header">My Header</div>
        <div id="content">

            <div id="side2">
                <p>Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.</p>
            </div>
            <div id="side1">
                <p>Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.</p>
            </div>
            <div id="main">
                <p>Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.</p>

                <p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
                <p>Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.</p>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div id="footer">My Footer</div>
</body>

</html>

Hello,

I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html

I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment.

Any help is much appreciated, thanks!

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Ok I've got this...

Code:

<html>
<head>

<style type="text/css">
	body {
		height: 100%;
		background-color: blue;
		margin: 0px;
		padding: 0px;
	}
	
	.container {
		height: 100%;
		width: 300px;
		margin: 90px auto 50px auto;
		background-color: green;
	}

	.footer {
		position: absolute;
		bottom: 0%;
		width: 100%;
		background-color: yellow;
		height: 50px;
	}

	.menubar {
		position: absolute;
		top: 0px;
		width: 100%;
		background-color: red;
		height: 95px;
	}
</style>

</head>
<body>
<div class="menubar">
	MENUBAR
</div>
<div class="container">
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	a<br>a<br>a<br>a<br>a<br>a<br>z<br>
<!-- footer -->
<div class="footer">
	FOOTER
</div>
</div>

</body>
</html>

Which works beautifully in opera, the green part is the full size of the document with all those a<br> in there (or without), and the footer is perfectly placed at the bottom.

But both IE (testing on version 6) & NS (testing on version 7.1) display the footer at the bottom of the window when it loads, not after the container div is finished... Also in NS the container divs background colour finishes once you scroll down a little.

Now I've tried many different ways around this.

I know what its like when I spend too long looking at one thing, I end up missing the obvious - so I thought I'd throw it out to a wider group for observations...

I thank you in advance.

-D

Hey

I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory.

Code:

/* page defaults */
body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #EAEAEA;
}

/* Layout divs */
#container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	position: static;
	left: 40px;
	top: 12px;
	padding: 0px;
	width: 800px;
	border-right: #003366 1px solid;
	border-left: #003366 1px solid;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	text-align:left;
	background-color: #FFFFFF;
}
#title {
	background-image: url(images/saved_title.gif);
	margin-top: 10px;
	background-repeat: no-repeat;
	height: 150px;
	border-top-color: #000000;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: #000000;
}
#navbar {
	background-image: url(images/navbar.gif);
	background-repeat: no-repeat;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 5px;
	height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right: 1px solid black;
	padding: 5px;
	background-color: #CCCFFF;
	width: 230px;
	height: 100%;
	margin: 0;
	float: left;
	font-size: medium;
}
#content {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 10px;
	padding-top: 40px;
	background-image: url(images/content.gif);
	background-repeat: no-repeat;
	background-position: -239px 0px;
	background-color: #FFFFFF;
	height: auto;
	width: 539px;
}
#footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #CCCCCC;
	margin-bottom: 10px;
	padding: 10px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	width: 780px;
	height: 25px;
	text-align: center;
}

/* Links */
a:link {
	color: #006699;
}
a:visited {
	color: #006699;
}
a:hover {
	color: #006699;
	text-decoration: none;
}
a:active {
	color: #006699;
}

/* elements */
#navwin h2 {
	font-size: large;
	display: block;
}

#navwin ul {}

thanks

Matt

I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense?

Any help would be greatly appreciated, thanks

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.

hello all,

i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box.

I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable.
I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction !

An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure.
As you can see, the only scrollable area is the center orange zone : "viewport".

thank you for your time and help !
Alexandre

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