Reducing window size moves elements - html

Question

Hello awesome programmers,
I have been struggling greatly with CSS for some time now. I have an issue when resizing a window, some of my divs begin to collapse down the page. (As shown)
Before:
before http://411metrics.com/pics/before.PNG
After:
before http://411metrics.com/pics/after.PNG
I have tried setting the min-width to 100% on various divs and also tried setting the overflow to hidden.
Does anyone have any suggestions as to how to fix this?
My HTML:
<div id="navigation">
<div id="branding-logo"><img src="/Portal/images/sharktek-logo.png" width="35" height="35"></div>
<div id="branding">Sharktek Tracking</div>
<div id="link-wrap">
<div id="active-nav">Dashboard</div>
Reports
Call Logs
Manage Campaigns';
</div>
<div id="nav-user">
Welcome<br>
Account Settings
Logout
</div>
</div>
<div id="nav-accent"></div>
My CSS:
#navigation {
z-index:3;
position: fixed;
top: 0;
width: 100%;
min-width:100%;
color: #ffffff;
height: 60px;
text-align: center;
/* Adds the transparent background */
background-color: rgba(22, 29, 37,1);
color: rgba(1, 172, 237, 1);
}
#navigation a {
float:left;
font-size: 14px;
padding: 25px 25px 0 25px;
color: white;
text-decoration: none;
}
#link-wrap {
float: left;
overflow: hidden;
margin-left: 15%;
}
#active-nav{
z-index: 2;
float:left;
color:white;
height: 60px;
background: -webkit-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* Standard syntax */
}
#active-nav a:hover {
color:white;
}
#navigation a:hover {
color: grey;
}
#branding-logo {
margin-top: 15px;
margin-left: 10px;
float: left;
}
#branding{
margin-top: 20px;
margin-left: 10px;
font-size:1.4em;
color: white;
float: left;
padding: 0px;
}
#nav-accent {
z-index:2;
position: fixed;
top: 60px;
width: 100%;
color: #ffffff;
height: 2px;
padding-top: 1px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 172, 237, 0.95);
color: rgba(1, 172, 237, 1);
}
#nav-user {
color: white;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 15px 30px 0 0;
font-size: .8em;
float:right;
}
#nav-user a{
margin: 0;
padding: 0 0 0 10px;
font-size:.8em;
}

Answer 1

I have had similar problems until I started to understand and apply absolute positioning. i.e. positioning relative the div you are in.
For absolute positioning the parent div must be set to relative positioning and after that you fix your inner elements to whatever side you like without having the browser take over the flow control.
e.g. in your case, with ...
#link-wrap {
position: absolute;
width: 500px;
/* ... the rest */
}
... your nav links will stop jumping all over the page. I made a few more tweaks in this fiddle http://jsfiddle.net/xb9cdu34/2/ .