#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    7
    Rep Power
    0

    Question Two ULs in one div


    Hi,

    Having some issues getting two ULs to sit properly in a div, I'm trying to have columns of ULs (class="col1", class="col2", etc.) inside a div and have them stack side by side; I've got this mostly working, however I'm having a problem with the background colour of the div not continuing over from col1 to col2.

    What I have so far can be seen here: patioshoppers.com/tmp/jp3.php

    Upon hovering over "Heating" on the top nav. menu, the drop-down is meant to display two columns both wrapped in a white div, however this is not functioning as I hoped.

    I'd be very grateful if someone could help me figure this out, I'm sure it's something small I am over-looking.

    Thanks.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    7
    Rep Power
    0
    Had over 100 views on this now... Could do with a reply. Anyone?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    sri lanka
    Posts
    2
    Rep Power
    0
    hay could you show an visualized picture or something.. bit of hard to understand your need.

    thanks
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    7
    Rep Power
    0
    Originally Posted by dharshana200
    hay could you show an visualized picture or something.. bit of hard to understand your need.

    thanks
    If you visit the URL, it'll show you in a better way than can be explained.

    Basically I have this:

    Code:
    <div class="menubox"> // this is the container div
      <ul class="col1">
        <li>link 1</li>
        <li>link 2</li>
        ...
      </ul>
      <ul class="col2">
        <li>another link</li>
        <li>and another</li>
        ...
      </ul>
    </div>
    I've got it so col1 sits on the left and col2 sits beside it on the right - I want to be able to have up to four columns essentially, all wrapped with the same background. Currently, col2 does not stretch the width of the div out. This is as col2 is set to absolute, but if I try an do it any other way, I can't seem to get it to move to be another column, it just appends the first column.

    Picture to illustrate (i49.tinypic.com/2udue7k.jpg)
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Atlanta, GA
    Posts
    14
    Rep Power
    0
    I would try setting the container to `display:inline-block`, and then position the nested lists with margins:

    See the code below in action at jsfiddle.net/SLs6m/

    css Code:
    &#8203;.menubox {
        background: #f1f1f1;
        display: inline-block;
    }
     
    .menubox > ul {
        width: 10em;
        height: 10em;
        list-style: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255,0,0,.2);
    }
     
    .menubox > ul > li {
        padding: .2em .5em;
    }
     
    .menubox > .col1 {}
     
    .menubox > .col2 {
        margin-left: 10em;
        margin-top: -10em;
    }
     
    .menubox > .col3 {
        margin-left: 20em;
        margin-top: -10em;
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    7
    Rep Power
    0
    Originally Posted by jonathansampson
    I would try setting the container to `display:inline-block`, and then position the nested lists with margins:

    See the code below in action at jsfiddle.net/SLs6m/

    css Code:
    &#8203;.menubox {
        background: #f1f1f1;
        display: inline-block;
    }
     
    .menubox > ul {
        width: 10em;
        height: 10em;
        list-style: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255,0,0,.2);
    }
     
    .menubox > ul > li {
        padding: .2em .5em;
    }
     
    .menubox > .col1 {}
     
    .menubox > .col2 {
        margin-left: 10em;
        margin-top: -10em;
    }
     
    .menubox > .col3 {
        margin-left: 20em;
        margin-top: -10em;
    }
    Tried incorporating that into the current CSS but the problem is it is using fixed height on UL, I need it to be able to expand, else this happens: jsfiddle.net/SLs6m/1/
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Atlanta, GA
    Posts
    14
    Rep Power
    0
    With so many variables in place (number of horizontal columns, number of vertical list items), my next step would be to position the columns absolutely within the box, and then determine the appropriate width/height of the box via JavaScript by adding up the total width/height of its children.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    7
    Rep Power
    0
    Originally Posted by jonathansampson
    With so many variables in place (number of horizontal columns, number of vertical list items), my next step would be to position the columns absolutely within the box, and then determine the appropriate width/height of the box via JavaScript by adding up the total width/height of its children.
    Decided to use jQuery in order to deal with the width and height of the container box. Can be seen here: patioshoppers.com/tmp/jp3.php

    However, having another issue. Everything seems to be fine height-wise, but again, width is being a pain.

    The width seems to be being calculated fine for every other item on the menu bar the first one.

    This is the jQuery I'm using:

    Code:
    $(document).ready( function()
    {
    	if( $(".menubox.last").children().length > 1 )
    	{
    		$(".menubox.last").width( $(".menubox.last").width() * $(".menubox.last").children().length );
    	}
    
    	var height = 0;
    	var heighest;
    
    	$(".menubox").children().each( function( index, value )
    	{
    		if( !$(this).parent().hasClass( "last" ) )
    		{
    			$(this).parent().width( ( $(this).parent().width() + ( $(this).outerWidth( true ) * 2 ) ) );
    		}
    
    		if( $(this).parent().children().length > 1 )
    		{
    			$this = $(this);
    			if ( $this.outerHeight() > height )
    			{
    				heighest = this;
    				height = $this.outerHeight( true );
    			}
    			$(this).parent().height( height );
    		}
    		else
    			$(this).parent().height( $(this).outerHeight( true ) );
    	});
    });
    I've tried multiple variations of using .width() and .outerWidth(), but for some reason it never sizes correctly on Heating.

    Would be awesome if anyone had any suggestions.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    7
    Rep Power
    0
    Fixed it.

IMN logo majestic logo threadwatch logo seochat tools logo