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 6 of 6

Thread: Aligning divs

  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    153
    Thanks
    53
    Thanked 0 Times in 0 Posts

    Aligning divs

    Hello, I have this page with this code:
    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css">
    body{
    background:#f1f1f1;
    marginauto;
    }
    #header{
    width:100%;
    background:#000;
    height:100px;
    }

    #menu{
    width:900px;
    marginauto;
    height30px;
    background#aaaaaa;
    vertical-alignbottom;
    }

    #mainc{
    width900px;
    background:#fff;
    marginauto;
    }

    </
    style>
    </
    head>


    <
    body>
        <
    div id="header">
            <
    div id="menu">
            
    Menu
            
    </div>
        </
    div>
        <
    div id="mainc">
         
    Main
        
    </div>

    </
    body>
    </
    html
    which produces this: http://i.imgur.com/UcDGt.jpg
    but I want to have the menu to be aligned on the bottom part of the "header" div. how could I go about doing this? I'm trying to make it look like this: http://i.imgur.com/NLOBp.jpg
    Appreciate any help!

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Vertical align mainly works on tables I believe.

    What I would do is position the menu using margin-top, or put position:relative on #header and position:absolute;top:80px; on the #menu. You might need to play with the positioning a bit.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I've been wrestling with this - it's not as easy as it first appears.

    I had to pull the 'menu' out of the header - sorry! Then position it relatively so I could use a negative 'top' value to pull it back into the header. But I then had to do the same with 'mainc', otherwise it leaves a 30px gap.

    (Note: you can't now put anything immediately under 'mainc' unless you, again, pull it up by 30px).

    'margin:auto' achieves the horizontal centre-ing, but 'vertical-align:bottom' doesn't achieve anything and could be deleted. This property is applicable to in-line text elements.
    Code:
    body{
        background: #f1f1f1;
        margin: auto;
    }
    #header {
        width: 100%;
        background: #000;
        height: 100px;
    }
    #menu {
        position: relative;
        top: -30px;
        width: 900px;
        margin: auto;
        height: 30px;
        background: #aaaaaa;
        /* vertical-align: bottom;  -- not relevant */
    }
    #mainc {
        position: relative;
        top: -30px;
        width: 900px;
        background:#fff;
        margin: auto;
    }
    Code:
    <div id="header"> 
    </div>
    <div id="menu">
        Menu
    </div>
    <div id="mainc">
        Main
    </div>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    wincode (05-01-2011)

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by Wojjie View Post
    What I would do is position the menu using margin-top, or put position:relative on #header and position:absolute;top:80px; on the #menu. You might need to play with the positioning a bit.
    I did try this (and other varieties..) but when the vertical alignment is achieved it then throws out the horizontal centre-ing. Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Can create a container div to help align it:

    Code:
    body{
        background: #f1f1f1;
        margin: auto;
    }
    #header {
        position:relative;
        width: 100%;
        background: #000;
        height: 100px;
    }
    #menuc {
        position: absolute;
        top: 70px;
        height: 30px;
        width: 100%;
    }
    #menu {
        width: 900px;
        margin: auto;
        height: 30px;
        background: #aaaaaa;
    }
    #mainc {
        position: relative;
        width: 900px;
        background:#fff;
        margin: auto;
    }
    Code:
    <div id="header">
       <div id="menuc">
        <div id="menu">
          Menu
        </div>
      </div>
    </div>
    <div id="mainc">
        Main
    </div>

  • Users who have thanked Wojjie for this post:

    wincode (05-01-2011)

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Thank you (an alternative solution )

    Seems a shame to add an extra element, but it is very difficult to achieve the desired effect without doing this (or by moving the menu outside of the header). Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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