Why is my aside at the bottom of this page?
I'm wondering why my aside is at the bottom of the page instead of next to the main content when I apply (float:right;) in the css. I've tried to float it on the left and the main content on the right but had the same problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Photoblog</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<header>
<h1>Photoblog</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h2>Welcome:</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<article>
<h2>First Impressions</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<article>
<h2>Bro</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<aside>
<h2>About Me</h2>
<p>
Hello here is some placeholder text. Hello here is some placeholder text.
Hello here is some placeholder text. Hello here is some placeholder text.
Hello here is some placeholder text. Hello here is some placeholder text.
</p>
</aside>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</body>
开发者_StackOverflow</html>
CSS:
body {
background-color: #F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: black;
padding:0px;
color: #ffffff;
display:block;
height: 80px;
width: 960px;
text-align : center;
line-height:80px ;
font-family : "Georgia", Serif;
}
nav ul {
list-style : none;
width:960px;
padding : 0;
text-align : center;
}
nav ul li {
color : #111111;
display : block;
}
nav {
display : block;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
float : left;
width : 600px;
padding-top:0px;
padding-right : 20px;
padding-left : 20px;
padding-bottom : 40px;
background-color : #cbe86b;
}
article img {
height : 400px;
width : 600px;
}
aside {
padding-left: 20px;
float: right;
background-color : #cccccc;
width : 300px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
float : left;
text-align: left;
width : 600px;
}
You haven't accounted for the padding in your widths. If you reduce your widths to those below, the aside will move back to the side.
article {
background-color: #CBE86B;
float: left;
padding: 0 20px 40px;
width: 560px; /* 560px + 20px + 20px = 600px */
}
aside {
background-color: #CCCCCC;
float: right;
padding-left: 20px;
width: 280px; /* 280px + 20px = 300px */
}
加载中,请稍侯......
精彩评论