SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    column heights - fluid 100%

    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.

    firstly, this is the page in it's current form >> http://diigital.com/css/
    ..and the CSS file >> http://diigital.com/css/eppscreen.css

    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.

    Thanks for any help.

  2. #2
    SitePoint Zealot HardinComp's Avatar
    Join Date
    May 2003
    Location
    Boston, MA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    J.M. Hardin
    My blog
    Registered Ubuntu User #10980

  3. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Thanks anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •