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