473,395 Members | 2,446 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Trouble with Layout

I am working on redesigning my site, but am having trouble getting the
basic layout to render the way I envision it. I am trying to get a
layout that is shaped like a U turned so the open end is to the right.
The top will be a nav bar, the side will have some features, and the
bottom will have copyright and etc. I am designing it using six divs:
one for the top nav bar, one for the top corner, where the logo will
go, one for the side bar, one for the bottom bar, one for the bottom
corner, and one for the content pane that will go "inside" the U. I
was able to position the top two divs with the following rules:

div.topCorner {
width: 200px;
height: 60px;
}

div.topBar {
position: absolute;
left: 217px;
top: 0px;
height: 53px;
width: 100%;
}

The next part is where I am really stumped. I want the bottom bar to
sit at the bottom of the window if there is not enough in the content
pane to cause a scrollbar to appear; otherwise, I want the bar to sit
at the bottom of the content. The sidebar will expand to fill the
space between the top and bottom corner divs, which is either the
height of the content div or the left over space between the divs when
the are fixed to the top and bottom of the navigator. I'm sorry if
this is not clear, but I can't think of a clearer way to put it.

Perhaps some ASCII diagrams ;)

-------------------------------------------------------------------
| |
| |------------------------------------------------------|
| | |
| | This is content. Notice that the layout fills the |
| | entire "navigator" even though the content does not |
| | warrant it. |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |------------------------------------------------------|
| |
-------------------------------------------------------------------

-------------------------------------------------------------------
| |
| |------------------------------------------------------|
| | |
| | This is content. Notice that the layout has |
| | expanded to allow the content to be displayed using |
| | the broswer's built-in scroll bar instead of an |
| | i-frame like experience. |
| | |
| | Lorum ipsum bunch of Latin junk. |
| | The quick brown fox jumped over the lazy brown dog |
| | more |
| | stuff |
| | taking |
| | up |
| | space |
| | that |
-------------------------------------------------------------------

Deos anyone know how I could implement this? I am not very
experiencesd with CSS, especially the positioning attributes, so any
help is much appreciated.

Thanks,
Chris

Nov 1 '05 #1
0 1060

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

Similar topics

4
by: Group IIS | last post by:
Hi all, I am using ALTOVA XMLSpy. The start of my XML file looks like this: <?xml version="1.0" encoding="UTF-8" ?> <Submission xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...
1
by: Martin Gutowski | last post by:
Hi, I'm having trouble with a three-column layout that has a 'banner' across the top of them. I'd like the top to have two graphics, one flush left and one flush right. They would be in those...
2
by: mr_burns | last post by:
Hi, I am trying to set the height percantage of a table but not having any luck. The URL is: www.martynbissett.co.uk/oarsome/ As you can see the home page doesnt reach to the bottom of the...
4
SamKL
by: SamKL | last post by:
Firefox was my initial testing browser for this design, and it looks just fine in FF... Opera, and IE both disagree however... the main part of the design looks fine, really. The hex-cells line up...
18
by: fishwick | last post by:
I haven't really done any css in quite a while, and am banging my head against the wall trying get the rudimentary layout together of a church website home page to display correctly - I don't want...
1
by: JayceeCamster | last post by:
My page is split into 3 sections. 1.The main layout. 2. Content box (IFRAME) 3. Footer w/ links (IFRAME) I have the javascript code to break frames on my main page, so when one of the links...
4
by: Bob Alston | last post by:
My client insists that the printed copy of text entered into a memo field have EXACTLY the same layout as it appears on the screen. I found I had to eliminate the vertical scroll bar. Then I...
6
by: Jeigh | last post by:
Hello, I've been designing a graphic to be behind a form. So I figure the best way to do this is to make a table, use a background image for a cell and then put the form inside that. That has all...
7
by: rsaund | last post by:
Hi, Disclaimer: I am a self-taught, non-professional doing free websites for clubs and friends, so please be kind re: my skillset:) I bought a template and modified using a plain text editor....
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

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.