I'm curious why the paragraph content gets sandwiched between two floated divs. I'd like the paragraph content to appear below the header. Also, why aren't the line breaks showing in the paragraph?
Check out this JS Fiddle link for reference: http://jsfiddle.net/yf3nyfk1/
HTML:
<body>
<div id="header-container">
<div id="header-wrap">
<div class="left logo logoimg">
<img src="http://i.imgur.com/dtMBhKq.png"/>
</div>
<ul class="nav">
<li class="contact">CONTACT</li>
<li class="about">ABOUT</li>
<li class="portfolio">PORTFOLIO</li>
</ul>
</div>
</div>
<div>
<p>
Lorem ipsum...
</p>
</div>
</body>
CSS:
body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
h1 {
font-size: 24px;
color: #FF9000;
}
img {
max-width: 100%;
}
.left {
float: left;
}
ul{
padding: 0px 0px 0px;
}
.right.nav {
float: right;
}
/******************************************************************************/
/* Menus */
/******************************************************************************/
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
}
#header-wrap{
padding: 0px 40px 0px;
}
.logo{
max-width: 440px;
width: 100%;
}
ul{
list-style-type:none;
display: inline-block;
}
.nav{
float:right;
list-style-type:none;
overflow: hidden;
}
.nav li{
float:right;
overflow: hidden;
}
.portfolio{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 0px;
width: 87px;
text-align: center;
}
.about{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 10px;
width: 60px;
text-align: center;
}
.contact{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 10px;
width: 76px;
text-align: center;
}
.orangebutton{
color: #FF9000;
border: 1px solid #FF9000;
margin: 0px 5px 0px;
}
/******************************************************************************/
/* Media Queries */
/******************************************************************************/
@media only screen and (max-width: 867px) {
#header-wrap{
padding: 10px;
}
.right{
float: none;
}
.nav{
float: none;
}
.left {
float: none;
}
.logo{
margin:auto;
}
}