is the page and This is the CSS.

I'm trying to figure out how to make it so the Wray box is floated to the rightmost of the page and then the White box, the second rightmost, eventually having the nav bar (split by the hr) on the left most of the 2 floats.

Other than rearranging the order in which the html is listed, how can I get this affect?

Also, if you can spare another answer, would you happen to know how to make it so the outerlimit container (light green) can be made to encompass the entire bunch?

I'm fast approaching a deadline, so any help will be greatly appreciated. Thanks a million!

2 answers

Mottie 1134

Hi, you could try positioning the boxes using relative and absolute positioning. There is a nice tutorial that shows you how to use them here.

I don't quite understand what you mean by the white box containing the nav bar, but this is how I would adjust your CSS (adjust the top: 10px as desired). The only problem with this now is if your browser window is narrow, the white box overlaps the header. I'm not quite sure what you are trying to do, but maybe this example will give you the idea.

.outerlimit {
  padding-top: 1px;
  margin-top: 0px;
  background-color: #c0ff87;
  position: relative;
  top: 0;
  left: 0;
.content {
  z-index: 1;
  background-color: white;
  width: 800px;
  position: absolute;
  top: 10px;
  right: 350px;
.newsbox {
  max-height: 400px;
  z-index: 2;
  width: 350px;
  background-color: #9a9a9a;
  position: absolute;
  top: 10px;
  right: 0px;
Answered about 7 years ago by Mottie
  • Hi Fudgey: Imagine a horizontal line. In order from left to right, I want the Nav Bar, the White Box, and then the Gray Box. Does that clear it up at all? Thanks. Dansid Altroyo about 7 years ago

This is the best solution to any 3 column layout using divs, they never behave quite how you think they will but this solution is copy'able and easy:

Answered about 7 years ago by richard bruce