Avoiding overlapping divs

[NZ Joe]

Bear with me, this could take a while. I am building a page for an intranet that will have three columns, each with its own style. What I have done is created each column within a div, positioned by the stylesheet. The problem is that in a smaller than maximised window, the right column overlaps the centre column, rather than it wrapping. How can I get the centre column to wrap its text so that it is visible, no matter what the window size.

Here is the relevant code:

<div width="100%">
  <div class="leftnav">
    Navigation stuff goes here
  </div>
  <div class="bodytext">
    The main body text goes in here.  This is the stuff that I want to wrap in smaller windows
  </div>
  <div class="quicklinks">
    Some more stuff here
  </div>
</div>

The style sheet stuff:

.leftnav{
position:absolute;
top:50;
left:0;
width:150;
}

.bodytext{
position:absolute;
top:60;
left:180;
width:400;
}

.quicklinks{
position:absolute;
top:60;
right:5;
}

I have tried it without using width, but it doesn't work

Thanks in advance

[isotope235]

Try this:

.leftnav
 {
 position:absolute; 
 top:50px; 
 left:0px; 
 width:150px; 
 } 
.bodytext
 {
 margin-left:180px;
 margin-right:180px;
 margin-top:60px;
 }
.quicklinks
 { 
 position:absolute; 
 top:60px; 
 right:5px;
 width:145px;
 }

adjust the width of the left and right page section in conjunction with the left and right margins of the center section. This will fix the size of the left and right sections and make the center "fluid".

Make sense?

[NZ Joe]

It makes perfect sense. Thanks very much, it works perfectly.

[NZ Joe]

Here's another similar question related to the same page. The left column has much less content than the centre column. I want to set a background colour in the left column that goes all the way to the bottom of the page. How can I do this? I have tried setting background-color in the stylesheet, but it doesn't work.

[weirdbeardmt]

Originally posted by NZ Joe
Here's another similar question related to the same page. The left column has much less content than the centre column. I want to set a background colour in the left column that goes all the way to the bottom of the page. How can I do this? I have tried setting background-color in the stylesheet, but it doesn't work.

use background: #fffff;

[NZ Joe]

I've done that, but the colour only fills to the bottom of the content in that column. I want it to go to the bottom of the page.