How to align the text on the bottom of the div
Question
Suppose I have two div as below (logo and admin):
<body id="main_body">
<div id="logo_area">
<div id="logo">
<image></image>
</div>
<div id="admin">
LOG IN
</div>
</div>
</body>
If I want the admin align next the bottom of the div. That is, it looks like this:
--------------------------------------------
IMAGE
LOG IN
--------------------------------------------
I tried the following CSS and it doesn't work.
#main_body {
margin:0px;
}
#logo_area {
background-color: #086A87;
height: 60px;
}
#logo {
padding-left:10px;
float:left;
width:80%;
margin-left:auto;
margin-right:auto;
}
#admin {
bottom:0px;
}
Can anyone shed some light here please?
Thanks
3 answers
solution1
2 ACCPTED 2013-01-24 06:18:27
Add position:relative to #logo_area and position:absolute to #admin
#logo_area {
background-color: #086A87;
height: 60px; position:relative
}
#admin {
bottom:0; position:absolute; right:0
}
Here is the detailed explanation about absolute and relative position
solution2
0
Just Add float:left; to the login CSS
#main_body {
margin:0px;
}
#logo_area {
background-color: #086A87;
height: 60px;
}
#logo {
padding-left:10px;
float:left;
width:80%;
margin-left:auto;
margin-right:auto;
}
#admin {
bottom:0px;
float:left;
}
Consider correct dimensions for the box and all divs inside, you set width:80%; for the logo, then, the remaining is 20% or is less for the login, you need to define this also:
#admin{
width: 20%;
}
DEMO: http://jsfiddle.net/CrcGU/
It seems that I misunderstood: Simply remove float:left; from #logo and add float:right; to the Login
#logo {
padding-left:10px;
width:80%;
margin-left:auto;
margin-right:auto;
background-color:navy;
}
#admin {
bottom:0px;
float:right;
width:15%;
}
solution3
0 2013-01-24 06:44:42
<header>
<div id="image">Some image here...</div>
<div class="clear"></div>
<div id="menu">
<ul>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
#image {
float:left;}
.clear {
clear:both;}
#menu {
float:right;}
#menu ul li {
display:inline;
margin:0px 10px 0px 0px}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.