DevStud DevStud - 6 months ago 16
CSS Question

right floating doesn't work

Hi there i just want to know why my css

float:right;
didn't work ?

I have created this DEMO from codepen.io

In this demo you can see there are one red div (
.hm
). This div should be right corner but it is floating left. What the problem on there anyone can help me in this regard ?

CSS

.header {
position:fixed;
width:100%;
padding:20px 0px;
box-sizing:border-box;
border-bottom: 1px solid #dbdbdb;
background-color:#ffffff;
}
.header_in {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0px auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.smatLogo {
position:relative;
float:left;
width:40px;
height:40px;
background-color:blue;
}
.smatLogo img {
width:100%;
}

.hm {
float:right;
position:relative;
height:40px;
width:100%;
max-width:200px;
background-color:red;
}

.mn {
float:left;
width:calc(100%/3 - 1px);
width: -webkit-calc(100%/3 - 1px);
width: -mox-calc(100%/3 - 1px);
height:40px;
}

.notif {
width:100%;
height:40px;
}

.exp{
width:100%;
height:40px;
}

.user{
width:100%;
height:40px;
}

Answer

Its because of display:flex; property set for the class .header_in. And that is the correct behavior of a flex object.

So now your options remain either to not use the flex property or if you need the properties of the flexbox then you can use the solution given below .

In order to workaround that you shall have to use margin-left: auto; for the .hm class.

DEMO

Note: This can also be done using tables but later down the line that same table will come back to bite you :D

Comments