www.webdeveloper.com
Results 1 to 8 of 8

Thread: Nested DIVs - how many levels?

  1. #1
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134

    Nested DIVs - how many levels?

    So far, I have 3 levels of nested DIVs for my template page. I'm thinking that when I add actual content, I may have to add two more levels in some places.

    This page is a basic header, two column and footer layout.

    Any problem with that approach?

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    http://www.inknoise.com/experimental/layoutomatic.php

    Use the drop down menu to select a two column layout and see if that is a little better way of doing it.

  3. #3
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134
    Thanks. I was able to get it to work, but it took a bit more CSS

    Now, what about that menu bar on the left that doesn't scale to the bottom. Is there a way to fix that? That's about the only problem I'm having at this current point in time.

    I'm going to have a look in the search...

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632
    What do you mean it doesn't scale to the bottom? Are you talking about if you included a border on the right that it doesn't go all the way done to the bottom on outer div? I would have the border be created by the content area since it would be the biggest section of your site, or I would hope so.

  5. #5
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134
    Errr, well, here is the page in question:

    http://dstudios.ca/temp/csstest5.html
    http://dstudios.ca/temp/style3.css

    The menu on the left (blue colour) doesn't scale down flush to the footer (purple colour).

    I've tried this page:
    http://www.quirksmode.org/css/100percheight.html

    However, I have to have both blue and green section have 100% thus they both scale down to the bottom of the screen. This means that there might be alot of empty space if the content is not long enough in the green section.

  6. #6
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134
    Found a way to solve this problem, but not sure its the optimal way to do so. Here is the code and CSS for it. Basically, I put the background color to the content DIV instead of the leftCol DIV. I also specify a white background color for the rightCol DIV.

    Code:
    <div id="content">
    	<div id="leftCol">
    		testing...
    	</div>
    	<div id="rightCol">
    		testing...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>here too...
    	</div>
    </div>
    Code:
                    #content{
    			width: 600px;
    			background-color: Blue;
    		}
    		#leftCol{
    			float: left;
    			width: 150px;
    		}
    		#rightCol{
    			float: right;
    			width: 450px;
    			background-color: white;
    		}
    Last edited by DanDigiMan; 12-30-2003 at 08:52 AM.

  7. #7
    Join Date
    Nov 2002
    Posts
    2,632
    Yep, that was pretty much what I was going to suggest.

  8. #8
    Join Date
    Dec 2003
    Location
    Ottawa, Ontario, Canada
    Posts
    134
    Thanks!

    I have some down time during the Christmas break here at work. Thought I'd dive in to learn about this CSS positionning thing

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles