Hi all,
I am trying my first CSS layout and have (not suprisingly) run into some problems. unfortunately I have a client attached to this so I don't have as much time to experiment as I would like.
Basically I have:
- a fixed pixel width top DIV (for the bitmap graphics)
- a fixed pixel width second div, similar to the first.
- a fixed width nav bar, floating on the left
- another div, between the nav and the content to space them out, floating left**
- the main content DIV.
**The reason I added the gap DIV between the main ones was that netscape (7) seemed to ignore the padding options for the the main div. And also because I will need to have a seperate background image to the top right.
Okay, the design works (in IE and Opera anyway) when the main content is less than 100% screen height.
However when the content extends (as you see on the page) the gap div remains at the original 100% screen height, and stops half way down.
In IE the green nav bar correctly continues to grow with the content, but in NS neither nav, nor gap DIVS will stretch.
I really need those DIVs to be 100% of the content height.
I apologize if this has been brought up before, I did search but as I said am quite short on time.
I checked it in Mozilla Friebird and the first screen is fine whether it's in a sized window or full screen at 1024x768. I can't seme to reproduce your problem (I haven't tried my other browsers yet) but as soon as I scroll the main content wraps around the bottom of your nav bar. You may want your main2 div to be absolutely positioned to the right of it. Add something like:
Code:
.main2
{
top: 200px;
}
Of course someone may come up with a better solution, but the above is how I would address the wrapping issue. This should also help keep the left and gap divs display 100% height all the way down the page, regardless of your screen size.
Hi thanks for your help.
What you suggested did help a bit in IE (don't have access to Firebird or Mozilla this morning) but Netscape (bless it) still wraps the content under the nav bar under the left.
The nav bar, and the gap DIV did not stretch to 100% though.
Unfortunately I have re-coded the layout in tables (gasp !). I think I need to learn a bit more before I try CSS again, or do it without deadlines.
At least now it looks the same in all the browsers, and I feel like I have some degree of control
Bookmarks