I need some help with my styling. I'm trying to get a nice looking website, but I just can't seem to do it. I've tried floats, but to no avail. I want to to have the look of the 'Aspen Development' as the brand name, and then have my buttons on the right side of the div. Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aspen Development | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navMenu">
<div id="header">
<div id="brand"><a href="index.html">Aspen Development</a></div>
<ul>
<li class="navButton">Home</li>
<li class="navButton">Pricing</li>
<li class="navButton">Contact Us</li>
</ul>
</div>
</div>
<div id="content">
<div id="contentContainer">
<p><b>4.21.14</b> Welcome to Aspen Development.</p>
<p><b>4.19.14</b> The website has been created!</p>
</div>
</div>
<div id="footer">
<center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright © 2014 Aspen Development | All Rights Reserved</p></center>
</div>
</div>
</body>
</html>
My CSS:
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
}
#navMenu, #footer {
width: 100%;
height: 50px;
background-color: #F8F8F8;
border: 2px solid #E6E6E6;
}
#header {
width: 1140px;
height: 50px;
margin: 0 auto;
text-align: right;
}
#brand a {
display: block;
width: 175px;
padding-top: 12px;
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
color: black;
font-size: 1.25em;
text-align: justify;
text-decoration: none;
}
.navButton {
display: block;
width: 175px;
padding-top: 12px;
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
color: black;
font-size: 0.75em;
text-align: justify;
list-style: none;
}
#content {
width: 100%;
}
#contentContainer {
width: 1140px;
margin: 0 auto;
}
#contentContainer p {
margin: 20px;
}
Thanks in advance. :)
Add this CSS classes :
ul{
float:right;
}
#brand {
float:left;
}
Add to .navButton
:
display: inline-block;
And add to #header
:
overflow:hidden;
Also replace :
width: 1140px;
with
min-width: 1140px;
width: 100%;
in #navMenu, #footer
and #header
.
Check Fiddle