align two divs in same horizontal line not working

Question

I am trying to align two divs in a same horizontal position. One div is float left and the other is float right. I've also kept the two divs inside another div but they still can not be aligned to a same horizontal position.

#tray {
  padding: 20px 15px;
  background-color: #36648B;
  color: #FFFFFF;
}
.f-left {
  /*float: left !important;*/
  font-size: 25px;
  width: 400px;
}
.f-right {
  float: right !important;
  width: 200px;
}
.f-left a {
  color: white;
}

<div id="tray">
  <div>
    <div class="f-left">Business Intelligence, CIMB</div>
    <div class="f-right">
      <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a>
    </div>
  </div>
</div>

Image Attached ::

Can you use a bit different approach? – Shubhranshu Jan 25 '17 at 12:30 — Shubhranshu, Jan 25 '17 at 12:30

score 1 · Accepted Answer · answered Jan 31 '17 at 05:40

in your css

add

.f-left {
    display: inline-block;
}

.f-right a {
    display: block;
    text-align: center;
    padding: 3%;
    color: #fff;
}

and delete non breaking space

<asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

to

<asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />

score 0 · Answer 2 · answered Jan 25 '17 at 12:32

If all the elements are in a single line here, then you can use the line-height fix for the elements. Give a fixed height to the parent element, and make it equal to the line-height of all the child elements.

Refer code:

#tray {
  padding: 20px 15px;
  background-color: #36648B;
  color: #FFFFFF;
}
.f-parent {
  height: 30px;
}
.f-left {
  display: inline-block;
  font-size: 25px;
  line-height: 30px;
}
.f-right {
  float: right !important;
  /* width: 200px; */ /* Uncomment this to give a fixed width */
  line-height: 30px;
}
.f-left a {
  color: white;
}

<div id="tray">
  <div class="f-parent">
    <div class="f-left">Business Intelligence, CIMB</div>
    <div class="f-right">
      <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a>
    </div>
  </div>
</div>

Giving height to a div is not good for the responsiveness??? — Shubhranshu, Jan 25 '17 at 12:34
Not really, if your inner contents have a fixed content then providing a fixed height does not hamper your responsiveness. You can change the height in your media queries if need arises for your small height. — nashcheez, Jan 25 '17 at 12:40

score 0 · Answer 3 · answered Jan 25 '17 at 12:33

0

You would need to add the style:

display: inline-block;

To the parent div.

answered Jan 25 '17 at 12:33

Yazid Erman

1,166
1
13
24

Sergi · Answer 4 · 2017-01-25T12:38:51.253

You could use FlexBox:

HTML

<div id="tray">
      <div class="f-left">Business Intelligence, CIMB</div>
        <div class="f-right">
            <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a>
        </div>

</div>

CSS

#tray {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   padding: 20px 15px;
   background-color: #36648B;
   color: #FFFFFF;
 }

 .f-left {
   font-size: 25px;
   width: 400px;
 }

 .f-right {
   width: 200px;
 }

 .f-left a {
   color: white;
 }

I removed the extra div in your HTML and just added display: flex, align-items: baseline and justify-content: space-between.

score 0 · Answer 5 · answered Jan 25 '17 at 12:38

Remove the additional surrounding div and add these properties on the tray class

display: inline-flex;
align-items: center;

#tray {
  padding: 20px 15px;
  background-color: #36648B;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
}
.f-left {
  /*float: left !important;*/
  font-size: 25px;
  width: 400px;
}
.f-right {
  width: 200px;
  
}
.f-left a {
  color: white;
}

<div id="tray">
    <div class="f-left">Business Intelligence, CIMB</div>
    <div class="f-right">
      <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a>
    </div>
</div>

score 0 · Answer 6 · answered Jan 25 '17 at 13:26

0

Use

float:left;

for both the div.

answered Jan 25 '17 at 13:26

Shadow Walker

206
1
2
13

score 0 · Answer 7 · answered Jan 27 '17 at 10:17

Please try this one...

<style>
    body {
        padding: 0;
        margin: 0;
    }

    #tray {
        padding: 20px 15px;
        background-color: #36648B;
        color: #FFFFFF;
    }

    .f-left {
        float: left !important;
        font-size: 25px;
        width: 400px;
    }

    .f-right {
        float: right !important;
        width: 200px;
    }

    .f-left a {
        color: white;
    }

    .clearfix {
        clear: both;
    }
</style>

html

<div id="tray">
    <div>
        <div class="f-left">Business Intelligence, CIMB</div>
        <div class="f-right">
            <asp:Label ID="lblUser" Font-Size="Large" Font-Bold="true" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="WebLogin.aspx" runat="server" id="logout" onclick="web_logout">Log Out</a>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

align two divs in same horizontal line not working

7 Answers7