CODEWITHSUNDEEP
htmlcsscss-position
Homer Kamal
Homer Kamal

Reputation: 47

How can I align content at the bottom of the div?

I have been trying to align my menu div at the bottom of the my logo div in the same line as of my logo inside my header. 

  <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;
   }

I want my menu div to start from the bottom of my logo in the same line.

Upvotes: 0

Views: 89

Answers (4)

Anup
Anup

Reputation: 9738

DEMO

 #logo {    
    float: left;
  }

#menu { 
   margin-left: 0px;
}

Upvotes: 0

Yax
Yax

Reputation: 2189

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;

} To have your menu on the same line with your image use float: left;

And to have the list in the same line use display: inline-block;

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

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

Menu under the logo

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;
   }

i think you need this

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

Upvotes: 0

Wayne Smith
Wayne Smith

Reputation: 4868

add

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

to place the menu items on one line.

to place then to the right of the image add.

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

and remove or correct the margin-left rule under menu selector.

Upvotes: 1

Related Questions