Почему моя часть внизу этой страницы? - PullRequest
Новая
       2

Почему моя часть внизу этой страницы?

1 голос
/ 03 августа 2011

Мне интересно, почему мое отступление находится внизу страницы, а не рядом с основным содержанием, когда я применяю (float: right;) в css. Я пытался разместить его слева и основной контент справа, но у меня возникла та же проблема.

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>
</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;
}

1 Ответ

3 голосов
/ 03 августа 2011

Вы не учли отступы в вашей ширине. Если вы уменьшите ширину до указанных ниже, aside переместится обратно в сторону. 

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 */
}
...