PDA

Click to See Complete Forum and Search --> : Positioning problems

sisko
11-15-2004, 03:10 PM
http://www.digitpress.com/DPNEW/
http://www.digitpress.com/DPNEW/style.css

I am trying to design the page so the navigationAndContent container is placed immediately after the pathAndSearchBar. In short, exactly where it is now. However, navigationAndContent should span until the bottom of the browser window, or until the bottom of innerRightContent, whichever is greater.

Hewever, I need the navigationAndContent container to span 100% of the vertical height so that the background effect behind the navigationMenu spans 100%. However when I specify the height of navigationAndContent, the container overflows 100px (for the header) + the dynamic height of the pathAndSearchBar...just like the CSS should. (Notice the vertical scroll is exactly the same height as navigationAndContent and pathAndSearchBar).

I tried to nest the containers, subNavAndContent, and set the margin-top to 140px (a value sufficient for testing), and that didnt work.

Strangely, the same nesting concept DID work for rightContent, and innerRightContent with a margin-left: 11em; to control the horizontal scrolling.

Any help is extremely appreciated.
toicontien
11-16-2004, 10:37 AM
Try Faux Columns (http://www.alistapart.com/articles/fauxcolumns/) at A List Apart (http://www.alistapart.com/).
sisko
11-16-2004, 02:00 PM
I saw that, but I wanted to stay away from that because it made the widths of the columns static, where as I felt a dynamic width would be better in terms of accessability.

Seeing how I could not get the back ground to perform how I wanted anyway, I scrapped it and did the faux columns. After some modifications to fit my application, they did the trick. Not only that, the HTML and CSS are MUCH more clean and readable, so I'll stick with it.

It's not the ideal solution I was shooting for, but it is acceptable:

http://www.digitpress.com/DPNEW/test.php
http://www.digitpress.com/DPNEW/style2.css
sisko
11-16-2004, 03:22 PM
Ugh, spoke to soon. I just tested this in IE, and naturally, it isn't working.

For some reason rightContent is being displayed the line after navigationMenu, despite the float: left.

I'm not familiar with this quirk. Does anyone know a workaround?
toicontien
11-17-2004, 02:29 PM
You don't need to position #navigationANDcontent. This is what you actually need:

<style type="text/css" media="screen">
<!--
#footer {
clear: left;
height: 1px;
overflow: hidden;
}

#navigationAndContent {
background: transparent url(page/to/faux-columns-image.gif) repeat-y scroll top left;
}

#navigationMenu {
float: left;
width: 190px;
}

#rightContent {
margin-left: 190px;
}

#innerRightContent {
margin: 0 .5em;
padding: .5em 0;
}
-->
</style>
</head>
<body>
<!-- Markup goes here for logo, site search form, etc. -->
<div id="navigationAndContent">
<div id="navigationMenu"></div>
<div id="rightContent ">
<div id="innerRightContent"></div>
</div>
<div id="footer">&amp;nbsp;</div>
</div><!-- end navigationAndContent -->
</body>

The #footer has clear: both;, which will make the browser calculate a top margin tall enough to have the footer placed below the two columns. Since #footer isn't floated, it also takes up space in #navigationAndContent and stretches that DIV the entire height of the layout. Let me know if this is what you're talking about, or at least close to it.
sisko
11-17-2004, 11:06 PM
Close, though I am very intrigued on no longer needing to position anything (and much cleaner code to boot). That was something I ended up doing very reluctantly.

I implemented the above code here:

http://digitpress.com/DPNEW/test3.php

However, the way rightContent was modified causes a nasty overflow error as depicted. I realize that this modification is also the reason for the vertical error correction in IE and now, why it didn't work in the first place. However, I cannot come up with an alternative solution to the problem, as I think the faux columns page used the same method I originally did. Kind of a 2 steps forward, one step back deal.

The goal is to have the red span the entire length of the remainder of the browser window or page content, whichever is longer. Since I already lost the dynamic width of left column, I suppose I could just take the sucker way out and make the red background a body background as opposed to the navigationAndContent background.