By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,480 Members | 1,146 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,480 IT Pros & Developers. It's quick & easy.

Can This 3-Column Layout Be Achieved?

P: n/a
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

Jan 17 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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)
Jan 19 '06 #2

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

-F

Jan 20 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.