For some reason the ".ep" div is 1 pixel too wide only in the ".heading" container, resulting in the header flowing to the next line. For dynamically generated content via php, which I put in the "#contents" div and has the same exact structure / uses the exact same CSS as the ".heading" div, it displays correctly. I've even validated my HTML/CSS with W3C. What gives?
For a more robust example refer to the project I'm working on found here.
Code (for those who do not wish to click) found below.
HTML:
<body>
<div class="container">
<div class="container toolbar">
<div class="search"></div>
</div>
<div class="container heading">
<div class="sid"><p>Show ID</p></div>
<div class="network"><p>Network</p></div>
<div class="title"><p>Title</p></div>
<div class="ep"><p>Episode</p></div>
</div>
<div id="contents">
<div id="loading" style="display: none">
<img src="assets/img/loading.gif" alt="loading" />
</div>
</div>
</div>
</body>
CSS:
html, body {
min-height: 100%;
}
body {
font-family: 'Open Sans', helvetica, arial, sans-serif;
}
.container p {
margin: 0;
}
#contents {
margin-top: 8em;
}
#contents #loading {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
}
.toolbar {
position: fixed;
top: 0;
background: #ccc;
color: #000;
margin: 0;
line-height: 5em;
}
.toolbar > div {
display: inline-block;
padding: 0;
margin: 0;
}
.heading {
position: fixed;
top: 5em;
font-weight: bold;
background: #00f;
color: #fff;
margin: 0;
}
.heading > div {
display: inline-block;
padding: 0;
margin: 0;
}
.heading p {
padding: 0;
line-height: 3em;
}
.sid {
width: 10%;
}
.network {
width: 25%;
}
.title {
width: 50%;
}
.ep {
width: 15%;
}