www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] How to get various DIVs to align by their tops?

  1. #1
    Join Date
    Aug 2010
    Posts
    82

    resolved [RESOLVED] How to get various DIVs to align by their tops?

    OK, I have Drupal spitting out all the site's menus out into a series of ULs using this line:
    Code:
    <div id="<?php print $class.'-foot'; ?>"><?php print render($menu_output); ?></div>
    But I want to take these 8 menus and place them in 6 columns at the foot of the site, as a site map. Like I have started at the bottom of this Drupal test page:
    http://www.girlscoutsmoheartland.org/drupal/

    Here's the issue:
    While I'm using CSS to moves these UL's around by their DIV IDs horizontally with margin-left values, how do I get them to all line up by the top?
    I can't use top or margin-top attributes, and I can't absolute position because I never know how tall/long/high/whatever the page's content is going to be.

    Any ideas?
    I'll paste the CSS I have here below.
    Thanks for any help!

    Code:
    #menu-about-us-foot {
    	margin-left:0px;
    	float:left;
    	margin-bottom:20px;
    }
    #menu-topmenu-foot {
    	margin-left:0px;
    	clear:both;
    	margin-bottom:20px;
    }
    #main-menu-foot {
    	margin-left:0px;
    	float:left;
    	margin-bottom:20px;
    }
    #menu-topmost-menu-foot {
    	margin-left:0px;
    	float:left;
    	padding-bottom:20px;
    }
    
    
    #menu-for-girls-foot {
    	margin-left:160px;
    	clear:both;
    }
    
    #menu-for-parents-foot {
    	margin-left:320px;
    	clear:both;
    }
    
    #menu-for-volunteers-foot {
    	margin-left:480px;
    	clear:both;
    }
    
    #menu-for-donors-foot {
    	margin-left:640px;
    	clear:both;
    }
    
    #menu-for-alumnae-foot {
    	margin-left:800px;
    	clear:both;
    }

  2. #2
    Join Date
    Aug 2010
    Posts
    82
    Nevermind, someone helped me.
    Put position:relative on the div around all the menus, then set position:absolute and top:0 on each of the individual menus, then margin-left to move them side to side.

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