472,972 Members | 2,271 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,972 software developers and data experts.

Can This 3-Column Layout Be Achieved?

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
2 1240
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
Jim, thank you for your excellent advice. I really appreciate you
taking the time to help. :)

-F

Jan 20 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Peter Hitchmough | last post by:
What is the *truth* when it comes to configuring Oracle files on an Enterprise Virtual Array like an HP EVA3000 or EVA5000 or an EMC Symmetrix frame. As I Understand It - A Virtual Array is a...
14
by: Adam Smith | last post by:
Hello, I've been trying to figure out how the columnar newspaper page layout is achieved in web pages, say at http://home.netscape.com/ or http://home.netscape.com/ . With the solid vertical &...
1
by: fuzzyman | last post by:
I have a very odd problem that has boggled my head. I've been trying to get a 2 column layout working with CSS. The problem seems to occur with the use of the <script> tag in the document. I've...
4
by: theo | last post by:
I'm having problems with 3column css (several rows), and am wondering if you guys might recommend a good solution. Try Opening these then stretch and shrink (resize) the window to see the...
2
by: Steve Richter | last post by:
I am spending too much time thinking of nesting tables within tables to get the form layout that I want. a simple example: Sub heading: property text: entry field property text: entry...
10
by: PW | last post by:
I have a layout that I can not seem to make work. Using a float:right, I can get the numbered items to wrap as desired around "rightdiv". The problem is, this is a dynamic list, and "5" shouldn't...
1
by: akress | last post by:
Hiya, I'm trying to convert a table with 6 colums that looks like this: <table class="myTable" width="640px"> <tr> <td><a href="#"> <img src="../_img/announce.gif" align="middle"...
4
by: Gunawan | last post by:
Dear All, I am new to web programming using ASP.NET 2.0. I have tried to build a website which I design using TABLE TAG and also PANEL (ASP:PANEL) The problem is, when I display or access web...
4
by: S John Philip | last post by:
Need to display a set of images in a form. The layout should be user selectable similar to MS WORD 2007+ - Table Insert funcionality. The user should be able to choose the rows and columns during...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
3
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.