HTML-bottom 글이 container 위에 위치합니다.

질문

HTML을 연습하기 위해 작은 웹페이지를 만들고 있는데 bottom 글이 내가 만든 container 아래가 아닌 헤더 아래에 배치되는 이유를 파악할 수없는 것 같습니다.

내가 간과 한 작은 것 일 가능성이 높지만 어디서나 해결책을 찾지 못하거나 해결책을 찾을 수 없으므로 여기에 조언을 주시면 대단히 감사하겠습니다.

header {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  padding: auto;
  background-color: black;
  display: block;
}

nav {
  float: right;
  background-color: black;
}

p,
h1,
h2,
li {
  font-family: sans-serif;
}

footer {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  background-color: black;
  text-align: center;
  padding: auto;
  display: block;
}

main {
  padding: auto;
  display: block;
}

#container {
  display: block;
  padding-bottom: 50px;
  margin: auto;
  width: 900px;
}

#left-column {
  display: inline-block;
  width: 450px;
  float: left;
}

#right-column {
  display: inline-block;
  float: right;
}

#button {
  border-radius: 5px;
  background-color: red;
  text-align: center;
  color: white;
  height: 50px;
  width: 80px;
}

<div id="container">
  <header>
    <p>Logo</p>
    <nav></nav>
  </header>
  <main>
    <div id="left-column">
      <h1>Website title</h1>
      <h2>Article title</h2>
      <p>Some text followed by a list:</p>
      <ul>
        <li>A list item</li>
        <li>A list item with a link (<a href="#">Click me</a>)</li>
        <li>New deals daily</li>
      </ul>
      <p> Some more text</p>
    </div>
    <div id="right-column">
      <h2>Some content related to the article</h2>
      <div id="button">
        <p>A Button</p>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy;Website name 2017</p>
  </footer>
</div>

Expand snippet

답변1

이전의 플로팅 요소를 지우려면 bottom 글이 필요합니다. CSS에 clear : both 를 추가하면됩니다.

header {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  padding: auto;
  background-color: black;
  display: block;
}

nav {
  float: right;
  background-color: black;
}

p,
h1,
h2,
li {
  font-family: sans-serif;
}

footer {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  background-color: black;
  text-align: center;
  padding: auto;
  display: block;
  clear:both;
}

main {
  padding: auto;
  display: block;
}

#container {
  display: block;
  padding-bottom: 50px;
  margin: auto;
  width: 900px;
}

#left-column {
  display: inline-block;
  width: 450px;
  float: left;
}

#right-column {
  display: inline-block;
  float: right;
}

#button {
  border-radius: 5px;
  background-color: red;
  text-align: center;
  color: white;
  height: 50px;
  width: 80px;
}

<div id="container">
  <header>
    <p>Logo</p>
    <nav></nav>
  </header>
  <main>
    <div id="left-column">
      <h1>Website title</h1>
      <h2>Article title</h2>
      <p>Some text followed by a list:</p>
      <ul>
        <li>A list item</li>
        <li>A list item with a link (<a href="#">Click me</a>)</li>
        <li>New deals daily</li>
      </ul>
      <p> Some more text</p>
    </div>
    <div id="right-column">
      <h2>Some content related to the article</h2>
      <div id="button">
        <p>A Button</p>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy;Website name 2017</p>
  </footer>
</div>

Expand snippet

답변2

header {
  height: 50px;
  color: white;
  margin: auto;
  padding: auto;
  background-color: black;
  display: block;
}

nav {
  float: right;
  background-color: black;
}

p,
h1,
h2,
li {
  font-family: sans-serif;
}

footer {
  height: 50px;
  color: white;
  margin: auto;
  background-color: black;
  text-align: center;
  padding: auto;
  display: block;

}

main {
  padding: auto;
  display: block;
  overflow:hidden;
}

#container {
  display: block;
  padding-bottom: 50px;
  margin: auto;
  width: 900px;
}

#left-column {
  display: inline-block;
  width: 450px;
  float: left;
}

#right-column {
  display: inline-block;
  float: right;
}

#button {
  border-radius: 5px;
  background-color: red;
  text-align: center;
  color: white;
  height: 50px;
  width: 80px;
}

<div id="container">
  <header>
    <p>Logo</p>
    <nav></nav>
  </header>
  <main>
    <div id="left-column">
      <h1>Website title</h1>
      <h2>Article title</h2>
      <p>Some text followed by a list:</p>
      <ul>
        <li>A list item</li>
        <li>A list item with a link (<a href="#">Click me</a>)</li>
        <li>New deals daily</li>
      </ul>
      <p> Some more text</p>
    </div>
    <div id="right-column">
      <h2>Some content related to the article</h2>
      <div id="button">
        <p>A Button</p>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy;Website name 2017</p>
  </footer>
</div>

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/47682816/html-footer-places-itself-above-container