0

When I have a grids layout that has little content in the yui-main block, some of the sidebar blocks (in my case those outside yui-main) jump down under the main block.

Here is an example page of this issue (and a pastebin'd source if the file no longer exists).

Examples

This one works fine as the content within #yui-main is longer than the content outside of it:

<div id="bd">
    <div id="yui-main">
        <div class="yui-b">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
        </div>
        <div class="yui-b">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
        </div>
    </div>

    <div class="yui-b">
        <h2>Delors sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
    </div>
</div>

However this one does not, as the content outside of yui-main is longer than the content inside of it. Thus it overspills underneath yui-main.

<div id="bd">
    <div id="yui-main">
        <div class="yui-b">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
        </div>
    </div>

    <div class="yui-b">
        <h2>Delors sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
    </div>

    <div class="yui-b">
        <h2>Delors sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
    </div>
</div>
Community
  • 1
  • 1
Ross
  • 46,186
  • 39
  • 120
  • 173
  • I can't quite tell what your goal is - do you want the two smaller paragraphs underneath yui-main; do you want them all in a single column? – Dan Lew Feb 13 '09 at 19:58
  • I want them all in a single column. For example, if you duplicate the content box in yui-main you'll get the result I'm looking for however I'd like to know if I can do this without adding extra content for small pages. – Ross Feb 13 '09 at 20:00
  • Have you tried using the CSS grid builder? (http://developer.yahoo.com/yui/grids/builder/) I'm no Grids expert, but I can pretty easily come up with 3 columns stacked on top of each other using the grid builder. – Dan Lew Feb 13 '09 at 20:07
  • @Daniel: The Grids builder uses the yui-g column set which isn;t waht I want here. The yui-main container is supposed to contain the main body content and allows me to later reconfigure the layout by changing the yui-tn class. – Ross Feb 15 '09 at 23:19

1 Answers1

1

The yui-b divs are floating but haven't been cleared. This essentially means that there's nothing to tell them below which elements to float, leaving them to vertically stack as seen.

Setting clear:both on the second yui-b div fixes this.

Jon Cram
  • 16,609
  • 24
  • 76
  • 107