Div dropping or disappearing

I have a row of three divs, when the user zooms in or resizes the window the 3rd div can either disappear or drop down, how do I prevent this

[code=html].siteheader {
width: 100%;
height: 93px;
border-bottom: 2px #085394 solid;
white-space: nowrap;
overflow: hidden;
}

.headercolumn {
width: calc(100% / 3);
float: left;
}

.headercolumnright {
width: calc(100% / 3);
float: left;
display: table;
}

<div class=”siteheader”>
<div class=”headercolumn”>
<div class=”defaultpaddingtop defaultpaddingleft”>
<asp:ImageButton ID=”ibRFIDLogo” CssClass=”rfidlogo” runat=”server” AlternateText=”RFID Discovery Logo” ImageUrl=”/Images/RFiD_Discovery_Logo.jpg” OnClick=”ibRFIDLogo_OnClick” />
</div>
</div>
<div class=”headercolumn aligncenter”>
<p class=”companyline1 paddingtop25 defaultpaddingbottom”>Cambridge University Hospitals</p>
<p class=”companyline2″>NHS Foundation Trust</p>
</div>
<div class=”headercolumnright”>
<div id=”headerboxleft”>
<p class=”companyline1 paddingtop25 defaultpaddingbottom”>DARREN ROCKETT</p>
<p class=”companyline2″>Administrator</p>
</div>
<div id=”headerboxright”>
<div class=”defaultpaddingtop defaultpaddingright”>
<asp:ImageButton ID=”ibLogout” ImageUrl=”~/Images/log_out_64.png” OnClick=”ibLogout_OnClick” runat=”server” />
</div>
</div>
</div>
</div>

[/code]

Also in #CSS _↴