SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Nesting Issue

    I am using a three-column layout in CSS. What I would like to know is how everyone handles getting all three columns to by the exact height besides using the height property? I know that nesting is an option, but I read that there are some real issues in Netscape when you are nesting more than one element. Any suggestions?

    Thanks in advance...

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nesting? I'm not sure whatcha talkin' bout.

    Got some code we can chew on?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height

    problems with nesting are usually due to failing to handle inheritance.

    Height is a problem because of the definition of height theoretically its infinite, you can scroll forever.

    Have to define height of containing block, which means you have to set height for html, body, and then container.

    Opera handles the setting of height for divs real well, if you set the height of a div, and its content is more than the height, the content will just run out of the box.

    IE will grow the div to fit the content. netscape the height is the height of the content. so have to use line height, br, transparent gifs, borders, whatever, to control height. (until the user decides to change it anyway)

    stevo

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nesting as in:

    <div id="main">blah, blah
    <div id="leftcontent">blah, blah
    <div id="rightcontent">blah, blah
    </div></div></div>

    Here's my current css code the scorce code for my site is located at http://www.cmtonline.com/index1.html.

    body {
    margin:0px 0px 0px 0px;
    padding:0px;
    background:#ffffff;
    font-family: Arial,Verdana, Helvetica, san-serif;color: #000099;
    font-size: 10pt;
    }

    P, TR, TD, DIV {
    font-family: Arial, Verdana, Helvetica, san-serif; color: #000099;
    }

    P {text-align: justify;}

    #leftcontent {
    position: absolute;
    left:0px;
    top:100px;
    width:130px;
    background:#dcdcdc;
    border-right: 2px solid #000099;
    }

    #centercontent {
    background:#ffffff;
    top:100px;
    margin-left: 140px;
    margin-right:140px;
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 201px;
    margin-right: 201px;
    }

    P.text {
    font-size: 10pt;
    font-family: Arial, Verdana, Helvetica, san-serif;
    }

    P.mainnav {
    font-size: 14pt;
    top:100px;
    font-family: Arial, Verdana, Helvetica, san-serif;
    }

    html>body #centercontent {
    margin-left: 201px;
    margin-right:201px;
    }

    #rightcontent {
    position: absolute;
    right:0px;
    top:100px;
    width:130px;
    background:#dcdcdc;
    border-left: 2px solid #000099;
    }

    #banner {
    background:#000099;
    background-image: url(pics/cmtbanner11.jpg);
    background-repeat: no-repeat;
    height:100px;
    border-top:1px solid #000;
    border-right:1px solid #000;
    border-left:1px solid #000;
    voice-family: "\"}\"";
    voice-family: inherit;
    height:39px;
    }

    .menulines a{text-decoration:none; color: #ffffff; font-family: Arial, Verdana, Helvetica, san-serif; font-size: 10pt;}
    .menulines a:hover{color:#000099; font-weight:bold; background-color:#f2f2f2; }

    html>body #banner {
    height:100px;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stevo, thanks for the advice...that's actually what Iíve been doing is setting the height for each box individually.

    What I would like to know is how can this be done differently...an example is www.w3c.org 's home page. The heights of all three columns match without having to specify each individual box height for each page. The two outer columns automatically match the height of the center column based on the length of the content provided. Is there another way to achieve this...

    I know there has to be...I just can't find any tutorials or anyone who will clue me in...

    Any help is always appreciated.

    Thank you.

  6. #6
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The w3c site uses a table for that section of the page.

    One method is to set the body background to the color you want for the left/right content and use a div in the center w/ left & right margin properties to control the visible left & right content.

    I've had some troubles in the past w/ heights, but can't remeber the specifics (and can only test in IE5 right now). The code below works OK in IE 5.5 and should give you something to play with.

    The use of absolute positioning for the adSpace will make the layout fall apart at lower resolutions depending on the padding prop's of the centerContent.

    You could probably accomplish something similar by nesting the div's and using the center to "push" the left and right content down. I haven't got time to mess with that now though (sorry).

    Code:
    <html>
    
    <head>
    
    <style>
    
    body
    	{
    	background-color:#dcdcdc;
    	margin:0px;
    	}
    #centerContent
    	{
    	background-color:#fff;
    	border-right:2px solid #000099;
    	border-left:2px solid #000099;
    	height:100%;
    	margin-left:130px;
    	margin-right:130px;
    	padding-left:201px;
    	padding-right:201px;
    	padding-top:150px;
    	}
    #navBar
    	{
    	background-color:#000099;
    	height:100px;
    	left:0px;
    	top:0px;
    	position:absolute;
    	width:100%;
    	}
    #menuBox
    	{
    	background-color:#fff;
    	left:10px;
    	height:150px;
    	top:150px;
    	width:110px;
    	position:absolute;
    	}
    #adSpace
    	{
    	background-color:#fff;
    	right:10px;
    	height:150px;
    	top:150px;
    	width:110px;
    	position:absolute;
    	}
    </style>
    
    <body>
    
    <div id="navbar"></div>
    <div id="menuBox"></div>
    <div id="adSpace"></div>
    <div id="centerContent">content</div>
    
    </body>
    
    </html>
    HTH

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sundari

    What I would like to know is how can this be done differently... The two outer columns automatically match the height of the center column based on the length of the content provided. Is there another way to achieve this...

    Just using divs, i dont think there is a way to automatically match the heights. i dont believe even the 3 column model at ALA is able to match the heights. as isotope pointed out the w3c page is just a page with tables for navigation, and his example plays with padding and margin to give the look of what you want but not exactly the structure that you want.

    unfortunately the "height" parameter is what we need but it is not defined well and implemented even worse. there is a lot of discussion of this problem on the ciwas group and eric myers style email group, but so far all i have seen is a lot of work arounds which dont necessarily work with all pages.
    The flavor lately is to set height of html and body, then set the container heights. if you give html and body slightly different heights and put borders around them you can play around with how different browsers implement the height. try floating one div left and one right instead of nesting the divs.

    good luck

    stevo
    Last edited by Stevo; Feb 28, 2002 at 07:59.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Stevo


    try floating one div left and one right instead of nesting the divs.

    example here http://www.sturgood.com/stevo/test/spheight.html

  9. #9
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stevo,

    I'm confused about "setting the html height". All of the content of an html doc must be contained within the body or frameset tags.

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Height?

    Originally posted by isotope235
    Stevo,

    I'm confused about "setting the html height". All of the content of an html doc must be contained within the body or frameset tags.
    yes but <html> is just a tag like <div> and style can be applied to it. since height is based on the height of the container, and the top level container is the html, you should be able to set height for it. you can set padding and margin, why not height and width.

    applying width and height to the html tag does validate so it should be applied. in playing around with it tonite, i found that ie6 ignores it, netscape6 implements width, and opera implements height and width on the html.

    ie 5.5 appears to ignore all style on the html tag. I am curious whether using a transitional dtd instead of strict would affect that, but too tired to play any more.

    screen shots and links to the pages here:
    http://www.sturgood.com/stevo/test/showheight.htmlthe html has a dark green border and lighter green background. Body is the white background with orange border inside.

    in addition i found you can use padding on the html to establish position of the body.

    sorry about the confusion, all the structure of the content must be within the body tag, (at least if you want it to validate) but style can be used to place that content outside of the body as this example shows.

    I am not sure good what all of this is, but i do love to play around with this stuff.

    stevo

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks isotope235...changing the style sheet around a little bit and wha-la...it works...thank you for all your help.

    Many Thanks,

    Sundari

  12. #12
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Happy to help.

  13. #13
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Height?

    Originally posted by Stevo


    yes but <html> is just a tag like <div> and style can be applied to it. since height is based on the height of the container, and the top level container is the html, you should be able to set height for it. you can set padding and margin, why not height and width.

    Stevo,

    I'm not trying to be an ***, but that's incorrect. The only valid attributes for the <html> tag are version(deprecated) lang & dir. <html></html> is a container for the <head> which contains info about the doc contents & <body> or <frameset> which contain the contents of the doc. Style attributes only apply to the <body> (or <framset>.
    Try specifying an inline style in the <html> tag & running it throught the w3c validator.
    Last edited by isotope235; Mar 1, 2002 at 17:07.


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
  •