Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Nesting divs.

  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Nesting divs.

    Hi, I am trying to make a javascript program that has to do with splitting the screen up into divs. One particular experiment I am doing is finding out how to split it up with 2 rows, and having the bottom row in 3 columns. I think I might have more nests than I need to, but the actual organization needs to be like this for my program to work.

    It looks good in firefox, but ie6 messes it up and shows the "bottom".
    Is there some property like overflow or something I am missing?


    Thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Dividing:</title>
    
    <style type="text/css">
    div {
    	border: none;
    }
    
    .left{
    	background-color:#0033CC;
    	
    }
    
    .right{
    	background-color:#CCCC66;
    	
    }
    
    .top{
    	background-color:#66CC99;
    	
    }
    
    .bottom{
    	background-color:#9999FF;
    }
    
    </style>
    </head>
    
    <body>
    
    
    Divide with a horizontal line
    <div class="container" style="width: 100%; height:300px;">
        	<div class="top" style="width: 100%; height: 25%;">
            	top split
            </div>
            <div class="bottom" style="width: 100%; height: 75%;">
            	<div class="left" style="float:left; width: 25%; height: 100%;">
                    left split
                </div>
                <div class="right" style="float:left; width: 25%; height: 100%;">
                    right split
                </div>
                <div class="left" style="float:left; width: 50%; height: 100%;">
                    left split
                </div>
            </div>
    </div>
    
    
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    I'm not on my dev computer so I can't check it but IE, being the worst browser on the planet, incorrectly expands parent elements to contain floated elements. I will give that hint as to the possible cause though I can't check myself right now.

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks, I'm trying a ton of stuff to find a solution. Also, is there a way to have to have 2-infinity div "columns" in a row of 100% width with borders . I find the borders are outside of the divs, so if the width is %100 with borders, they go to new lines:

    Code:
    <div style="width:100%; height:300px">
    	<div class="left" style="float:left; width: 50%; height: 100%; border-bottom:1px solid black; border-left: 1px solid black;border-top:1px solid black;">
            	left split
        </div>
        <div class="right" style="float:left; width: 50%; height: 100%; border:1px solid black;">
            	left split
        </div>
    </div>
    To explain why I want to nest stuff like this... I hope to make something where you can divide the screen into cells. You start with 1 div of 100% width. You can split it vertically or horizontally. Then you have 2 divs of 50%, and you can resize them (so they always add to 100% total). Then, if you split either of those divs, you can also resize the those.....etc. So it is will let people "design" a screen layout.


    Thanks

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    A rough way of dealing with the first problem above is to adjust widths on those 3 left-floated divs so they total 99% of their parent container (e.g. 25%, 25%, 49%), instead of 100% (25%, 25%, 50%). The floats will all then move to their required positions, even in IE. However, a 1 % wide vertical strip of the the background container's color will then show through.

    That's not a problem in some layouts where the container's b/g color is deliberately kept unobtrusive and there are no surrounding containers to make it show up. But it does show up here.

    A better way might be to use negative margins in conditional comments for the benefit of IE. Perhaps a left- or right-margin of minus 1px applied to any of those floated divs will do it:

    Code:
    <style type="text/css">
    * { margin: 0; padding: 0; border: none; }
    html, body { height: 100%; width: 100%; }
    
    .left { background-color:#0033CC; }
    .right { background-color:#CCCC66; }
    .top { background-color:#66CC99; }
    .bottom { background-color:#9999FF; }
    </style>
    
    <!--[if IE]>
      <style type="text/css">
        .right { margin-right: -1px; }
      </style>
    <![endif]-->
    
    </head>

    That could also be a way of compensating for the extra room taken up by any borders - just increase the negative margins appropriately where required.
    Last edited by auslin; 11-27-2008 at 04:37 AM. Reason: Fixed small mistake


  •  

    Posting Permissions

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