Как я могу выровнять содержимое в нижней части div?

Question

Я пытался выровнять мое меню div внизу моего логотипа div в той же строке, что и мой логотип внутри моего заголовка.

<div id="header"> 
      <div id="top-bar"> 
      </div> 
      <div id="clear"></div> 
      <div id="logo"> 
       <img id="logoimg" src="images/KTMLogo.png" /> 
      </div> 
      <div id="menu"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Movies</a></li> 
        <li><a href="#">Theaters</a></li> 
       </ul> 
      </div> 
     </div> 

CSS

#header { 
    background-color:#e1874b; 
    border-bottom-left-radius:25px; 
    border-bottom-right-radius:25px; 
    float:left; 
    position:relative; 
    } 

    #logo { 
    width:280px; 
    } 

    #logo img { 
    max-height:240px; 
    max-width:240px; 
    } 

    #menu { 
    font-size:18px; 
    padding:20px; 
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%); 
    width:500px; 
    margin-left:300px; 
    } 

Я хочу, чтобы мое меню ДИВ начинать с нижней части моего логотипа в одной и той же линии.

Answer 1

добавить

#menu ul li { 
    display:inline-block; 
} 

размещать пункты меню на одной строке.

для размещения, затем справа от изображения добавить.

#menu,#logo { 
    display:inline-block; 
} 

и удалите или исправьте правило с пометкой слева под селектором меню.

Answer 2

меню под логотипом

DEMO

#menu { 
    font-size:18px; 
    padding:0px; 
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%); 
    width:500px; 
    margin-left:0px; 
    } 

я думаю, что вам это нужно

UPDATED DEMO

#header { 
    background-color:#e1874b; 
    border-bottom-left-radius:25px; 
    border-bottom-right-radius:25px; 
    float:left; 
    position:relative; 
    } 

    #logo { 
    width:280px; 
    } 

    #logo img { 
    max-height:240px; 
    max-width:240px; 
    } 

    #menu { 
    font-size:18px; 
    padding:0px; 
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%); 
    width:500px; 
    margin-left:0px; 
    } 
#menu ul{ 

    display:inline-block; 


} 

#menu ul li{ 

     display:inline-block; 

} 

updated again

Answer 3

Try:

#menu { 
    font-size:18px; 
    padding:20px; 
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%); 
    width:500px; 
    margin-left:300px; 
    float: left; 

} Чтобы иметь на одной линии с изображением вашего меню используйте float: left;

И иметь список в том же использовании линии display: inline-block;

#menu ul li { 
    display:inline-block; 
} 

Answer 4

DEMO

#logo {  
    float: left; 
    } 

#menu { 
    margin-left: 0px; 
}