Как мне расположить кнопки, чтобы они совпали по горизонтали с другим элементом?
Мне нужна помощь с моим стилем Я пытаюсь получить красивый сайт, но я просто не могу этого сделать. Я пробовал поплавки, но безрезультатно. Я хочу, чтобы название «Aspen Development» выглядело как название бренда, и чтобы мои кнопки были справа от div. Вот мой 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>
Мой 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;
}
Заранее спасибо. :)