How to work with float left right and vertical align middle? - html

Question

I need to align logo to left and navigation to right and the text in logo and navigation must be aligned bottom of the logo-nav div.
Note: Without flex box
.logo {
float: left;
}
.navigation {
float: right;
}
.clear {
clear: both;
}
<div class="logo-nav">
<div class="logo">Partners</div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>

Answer 1

You can use Flexbox for this. You just need to set margin-left: auto on navigation and align-items: flex-end for vertical-align.
.logo img {
vertical-align: top;
}
.logo-nav, .nav-ul {
display: flex;
align-items: flex-end;
list-style: none;
margin: 0;
}
.navigation {
margin-left: auto;
}
<div class="logo-nav">
<div class="logo"><img src="http://placehold.it/100x50"></div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
You can also use CSS tables.
.logo img {
vertical-align: top;
}
.logo-nav {
display: table;
width: 100%;
border-bottom: 1px solid black;
}
ul {
margin: 0;
}
.logo,
.navigation {
display: table-cell;
vertical-align: bottom;
}
.navigation {
text-align: right;
}
li {
display: inline-block;
}
<div class="logo-nav">
<div class="logo">
<img src="http://placehold.it/100x50">
</div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>

Answer 2

.logo-nav{
height:40px;
border-bottom:1px solid black;
width:100%;
margin:0;
padding:0;
}
.navigation{
float:right;
margin:0;
padding:0;
height:100%;
}
.navigation ul{
margin:0;
padding:0;
height:100%;
}
.navigation ul li{
margin:0;
padding:0;
float:left;
margin:0 5px;
list-style-type:none;
display:flex;
align-items:flex-end;
height:100%;
}
.logo{
float:left;
margin:0;
padding:0;
height:100%;
display:flex;
align-items:flex-end;
}
<div class="logo-nav">
<div class="logo">+CoPartners</div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>

Answer 3

Add the following css
.nav-ul li{float:left; list-style:none;padding:0 5px;}
.nav-ul{padding:0;margin:0;}

Answer 4

Since this is not possible with floats, you can use display: inline-block instead. It works like a poor man's flex.
.logo-nav {
text-align: justify;
}
.logo-nav::after {
/* you can omit this by using `text-align-last` */
content: '';
width: 100%;
display: inline-block;
}
.logo {
display: inline-block;
vertical-align: middle;
text-align: left;
width: 50%;
}
.navigation {
display: inline-block;
vertical-align: bottom;
text-align: right;
width: 50%;
}
.clear {
/* this element is obsolete now */
}
Note: there must be no space between .logoand .navigation in your markup.

Answer 5

Are you allowed to use position absolute?
li{
float: left;
padding: 0 5px;
}
ul{
list-style: none;
position: absolute;
right: 0;
margin: 0;
bottom: 0;
}
img{
display: block;
}
.logo{
float: left;
}
.logo-nav{
background: lightblue;
position: relative;
}
.logo-nav:after{
display: block;
clear: both;
content: "";
}
<div class="logo-nav">
<div class="logo"><img src="http://placehold.it/100x50"></div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>