Bottom align menu with logo?

Question

I'm new in web development and I'm working on a website using HTML and CSS. I am having a problem with my menu, i want it to be in horizontally bottom alignment with my log but it appears to be in top alignment instead.

Here is my code, please suggest the solution.

HTML:

<hgroup>
    <div id="Head">
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</hgroup>

CSS:

#Head {
    float:left;
    margin-left:120px;
    margin-right:150px;
    width:200px;
    height:150px;
}
/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}

Also on a side note, your head is set in css to be width:200px, but your image size is 380px? — Doug, Jul 21 '14 at 21:35
I'm confused. Are you asking us that you want the menu to be below the logo? Or do you want aligned under it instead of next to or above it? Anyway, I suggest that you should use your logo as a background-image in CSS instead of calling it as a image. It prevents problems. — Christopher 'Solidus' DeJong, Jul 21 '14 at 22:02
Thanks for the solution. I actually want the logo and menu to be in straight line horizontally, with menu align with bottom rather then top of logo — user3560735, Jul 21 '14 at 22:07

score 0 · Answer 1 · answered Jul 21 '14 at 21:46

You can try something like

<div class="header_container">
  <div id="Head"> 
    <img src="img/logo.png" width="380" height="100" alt="Logo" /> 
   </div> 
   <div class="navcontainer">
      <div id="nav">
        <ul> 
           <li><a href="#">HOME</a></li> 
           <li><a href="#">ABOUT</a></li> 
           <li><a href="#">PROJECTS</a></li> 
           <li><a href="#">GALLERY</a></li> 
           <li><a href="#">CONTACT</a></li> 
        <ul> 
      </div> 
    </div>
</div>

CSS:

.header_container {
    position:relative;
}
#Head 
{ 
   margin-left:120px; 
   margin-right:150px; 
   width:200px; 
   height:150px; 
   background: red;
   float:left;
} 
/*------------------------*/ 
.navcontainer {
    position: relative;
    height:150px;
    float: left;
}
#nav { 
    background: green;
    position:absolute;
    bottom: 0;
    height: auto;
    width: 600px;
} 

#nav ul{ 
   margin: auto 0; 
   padding: 0; 
   list-style-type: none; 
   text-align: center;
   position: relative;
} 
#nav ul li { 
    position: relative;
    display: inline; 
    height: auto;
    bottom: 0;
    margin: auto 0;
} 
#nav ul li a{ 
    text-decoration: none; 
    padding: .2em 1em; 
    color:#000; 
    font-size:18px; 
} 
#nav ul li a:hover{ 
    color:#008c00; 
}

JSFiddle

But.. it's not really a good html/css.

I suggest you to learn Bootstrap framework. It can help you build a good CSS without too much effort.

score 0 · Answer 2 · answered Jul 21 '14 at 21:50

Well, based on the limited knowledge you have provided and lack of imagery to support your end result or goal, I have provided an example without any of the floats and hard coded dimensions. All that was required for this example was the use of display: table-cell; on the two div containers like so:

#Head 
{ 
  display: table-cell;
  height:150px; 
} 

#navcontainer{
  display: table-cell;
}

Here is a working example: http://plnkr.co/edit/NI2AXivXYKnXI2RJOnnh?p=preview

Clarity and better definition of the goal you are trying to accomplish will help you better moving forward.

Related to IE8 - "It seems to help if the parent container of a display:table-cell element has a display:table attribute (and a table-layout:fixed), see this example and this related question." - http://stackoverflow.com/a/15658118 — Frankie Loscavio, Jul 22 '14 at 11:44

score 0 · Answer 3 · answered Jul 21 '14 at 22:12

is it your expectation look like this?

https://www.facebook.com/photo.php?fbid=10204351601212725&l=ee54079c94

try this

<style>
hgroup{
    text-align:center;  
}

/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;    
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}</style>
<hgroup>
    <div id="Head" >
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>  
</hgroup>

Bottom align menu with logo?

3 Answers3