I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png
.body_clr {
width: 100%;
height: 100%;
display: block;
background-color: black;
height: 60px;
/* ADDED to see the text */
color:white;
}
.clear {
width: 0;
height: 0;
padding: 0;
margin: 0;
display: block;
visibility: hidden;
overflow: hidden;
font-size: 0;
line-height: 0;
clear: both;
}
.col1 {
width: 33.33%;
height: 100%;
display: block;
float: left;
padding: 0 10px;
box- sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.ff {
width: 100%;
height: 60px;
display: block;
text-align: left;
display: table- cell;
vertical-align: middle;
}
.left {
width: 100%;
height: 60px;
display: block;
text-align: left !important;
display: table-cell;
vertical-align: middle;
margin-left: 5px
}
.right {
width: 100%;
height: 60px;
display: block;
text-align: right;
display: table-cell;
vertical-align: middle;
margin-right: 5px
}
}<form id="form1" runat="server">
<div class="body_clr">
<div class=" col1">
<div class="left">
LinkButton
<asp:LinkButton ID="LinkButton1" runat="server">Hello I am a link button
</asp:LinkButton>
</div>
</div>
<div class="col1">
<div class="ff"></div>
</div>
<div class="col1">
<div class="right">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label> |
<asp:Button ID="btnSignout" runat="server" Text="Sign out" BackColor="Black" ForeColor="White" OnClick="btnSignout_Click" />
</div>
</div>
</div>
</form>