Can This 3-Column Layout Be Achieved?

[fleemo17]

A client notified me of a "design flaw" in his site
(http://www.waterlessons.org ). When he closes his browser down to a
very small window, the main text area gets overlapped by the box of
links on the right.

What he'd like to see on the site is:

· The left column remains static
· The far right column (links box) sticks to the right edge of the
browser window and maintains its width
· The width of the middle column (content area) would be able to
adjust to a very thin column, according to how small the browser window
is, but not be overlapped by the right column.

Can this be achieved using CSS?

Thanks.

-Fleemo

[Jim Moe]

fl******@comcast.net wrote:

· The left column remains static
· The far right column (links box) sticks to the right edge of the
browser window and maintains its width
· The width of the middle column (content area) would
adjust to a very thin column, according to how small the browser window
is, but not be overlapped by the right column.

Can this be achieved using CSS?

Yes.

Change the HTML by moving the "webcast" div into the "content" div:
<div class="content">
<div class="webcast">
...
</div>
...
</div>
This way webcast is inside content and the text has something to flow
around rather than just two blocks jockeying around each other.

Change the CSS:
div.leftnav {
position: absolute;
top: 1em;
left: 0;
margin: 0;
padding: 1em;
color: #07326a;
font-size: 0.9em;
width: 9em;
}

div.content {
margin: 3em 1em 3em 10em;
}

div.webcast {
font-size: .9em;
height: 201px;
background: #678 url(images/box.gif) center center no-repeat;
color: #fff;
text-align: center;
margin: 0 0 0 1em;

width: 9em;
float:right;
line-height: 117%;
z-index: 1;
}

div.circletext {
margin: 2em -1em 0 0;
}

Using ems to set the widths and margins allows the layout to adjust to
different fonts and font scaling. It is conceivable, however unlikely,
that the visitor has neither arial nor helvetica.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[fleemo17]

Jim, thank you for your excellent advice. I really appreciate you
taking the time to help. :)

-F