SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column CSS design and DIV height problems

    Hi All,

    Converted my website to 2 column CSS model. Left menu and page content to the right.

    <i>Description</i> - The menu is in the floating div of class menu and the page content is in the div of the main class. both of them together are yet in one more div called container.
    Otherwise I was having troubles aligning those 2(menu & main) vertically. The portion of css defining those classes is below. The HTML code looks like this:
    html header, title picture, etc.
    <div class=container><div class=main>
    contents of main...
    </div><div class=menu>
    include here some menius
    </div></div></BODY></html>

    <i>Problem(s)</i> - Well, for one, I couldn't make the thing looks the same in NN and MSIE 6.0. I don't really care abotu the rest of the browsers. Looks ok in Opera too. Altohugh had to use 2 different CSS files. The stylesheet below is for MSIE 6. I dont' think this is resolvable, as apparently objects are rendered differently in NN and MSIE.
    Major problem for now, or what I think is a major prob, the height of the main div. I'm using left border of the main div as a divider between the menu and page content. Unfortunatelly if the page content is small then the vertical line comes shorter compared to the menu. Like here - http://zvis.com/mus/queen/qlghits2.shtml
    I'm not sure I understand why this is happening. Theoretically both, <i>main</i> and <i>menu</i> are inside of the <i>container</i>. Menu has height set to 100%, I am assuming that this is the height of container. But then menu comes out higher. Is there a way to make those 2 somehow equal?
    The thing is that on other pages menu is shorter and I don't want to have another style with a border on a differnt div.
    Is the root of the evil in floats?

    border-left in common css is defined as black, then local styles override it with their own clor.

    .main {border-left:#000 solid 1px;position:relative; margin-left:11em;padding:0 1em 0 1em;height:100%;}
    .menu {float:left; width:11em; position:absolute; top:0px;text-align:left; padding-left:1em;}
    .menu a {display:block;margin-right:1em;}
    .container {position:relative;height:85%;margin-top:2em;}
    Have Fun,
    Gator
    zknives.com

  2. #2
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of Netscape are you testing in? Im using Mozilla 1.0 (NS 6-7) and it looks exactly the same as it does in IE.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using NE 6.2 / Mozilla 1.0 and MSIE 6.0.
    If you went to the site then, it should look the same because I'm using SSI to detect the user agent and load the appropriate css file.
    The differences are in margins and stuff like that:

    Here's the style for ie:
    body {margin:25px 0 25px 0; padding:0} hr {display:none;}
    .dhr {border-bottom:#000 solid 1px; padding: 0; margin: 1em 1em 1em 0;}
    .main {border-left:#000 solid 1px;position:relative; margin-left:11em;padding:0 1em 0 1em;height:100%;}
    .menu {float:left; width:11em; position:absolute; top:0px;text-align:left; padding-left:1em;}
    .menu a {display:block;margin-right:1em;}
    .container {position:relative;height:85%;margin-top:2em;}


    and here's one for NN
    body {margin:25px 0 25px 0; padding:0} hr {display:none;}
    .dhr {border-bottom:#000 solid 1px; padding: 0; margin: 1em 2em 1em 0}
    .main {border-left:#000 solid 1px;position:relative; margin-left:11em;padding:0 1em 0 1em;height:100%}
    .menu {float:left; width:11em; position:absolute;top:0px;text-align:left;padding-left:1em;padding-right:1em}
    .menu a {display:block;margin-right:2em}
    .container {position:relative;height:85%;margin-top:1em}

    Since I have SSI, ok whatever I can use 2 styles, not excited about that either, but ok.
    The major trouble is with the border of the main div. Why it is shorter
    Have Fun,
    Gator
    zknives.com

  4. #4
    SitePoint Enthusiast rreames's Avatar
    Join Date
    Jun 2002
    Location
    Iowa
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it critical for it to look exactly the same in those browsers? I am using Galeon(Mozilla based) on Debian GNU/Linux. I don't know if what I see is exactly what you want, but it looked fine.

    Now if the sites are way off from each other making one difficult to use, thats different. But from your styles it looks like just a couple em's.
    Apathetic Activist.
    reames.org

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, they look and behave the same now, and yes, the difference is only couple ems.

    The major trouble is the height of the vertical line. At least in all the browsers and OSes I have tried the vertical line (which is the left border of the main div) is shorter than the menu div. Although I've places both manu and main divs in another div called container and main has the height specified as 100%.
    Yet it comes out shorter than the menu div.
    From what it is, looks like the height is calculated first and then menu div is extended as necessary? Doesn't make much sense
    Have Fun,
    Gator
    zknives.com


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
  •