Looks like it's working as it should. When elements are floated, the parent
element will not grow to enclose the floated elements, need to add an
element to clear, or apply a 'clearfix' class to the parent element like in
BlueprintCSS
.clearfix:after{
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix{display: block;}
http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/
Kevin
On Thu, Nov 18, 2010 at 1:33 PM, ms <[email protected]> wrote:
> Hey,
>
> thank you for reading this post, maybe you can help me. I am trying
> to
> nest grids, but it does not work, see my lines (extracted and
> shorten):
>
> Just copy, save as html, and then you'll see what I mean: the orange
> solid bordered list items should be in the red dotted list container,
> but that's not the case.
>
> Can you help me with this?
>
> <html>
> <head>
> <title>TESTING</title>
> <link rel="stylesheet" type="text/css" href="http://
> yui.yahooapis.com/
> 2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css">
>
> <style type="text/css">
>
> div, ul, li { padding:5px; }
>
> </style>
>
> </head>
> <body class="yui-skin-sam">
> <div id="doc3" class="yui-t2">
> <div id="bd">
> <div id="yui-main">
> <div class="yui-b">
>
> <div class="some_outer_div" style="border: 1px solid green;">
> <ul class="some_outer_list" style="border: 1px solid blue;">
> <li class="some_outer_item" style="border: 1px solid red;">
> <div class="some_inner_div" style="border: 1px dashed green">
> <div class="yui-g">
> <div class="yui-u first">
> <div class="some_more_inner_div" style="border: 1px dotted green;">
> <ul class="some_inner_list" style="border: 1px dashed blue">
> <li class="some_inner_item" style="border: 4px dotted red;">
> <div class="yui-g">
> <div class="yui-u first">
> <div class="some_deep_inner_div" style="border: 2px solid orange;">
> INNER LEFT
> </div>
> </div>
> <div class="yui-u">
> <div class="some_deep_inner_div" style="border: 2px solid orange;">
> INNER RIGHT
> </div>
> </div>
> </div>
> </li>
> </ul>
> </div>
>
> </div>
> <div class="yui-u">
> <div class="some_inner_div" style="border: 1px dotted green;">
> OUTER RIGHT
> </div>
> </div>
> </div>
> </div>
> </li>
> </ul>
> </div>
>
> </div>
> </div>
> </div>
> </div>
> </body>
> </html>
>
> Thank you very much!
> ms
>
> --
> --
> You received this because you are subscribed to the "Design the Web with
> CSS" at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
