Why is DIV outside of containing DIV?

Asked Sep 27 '18 at 15:01

Active Sep 27 '18 at 15:10

Viewed 47 times

What is causing this webpage to be so screwed up: http://scratchpad.io/tame-cork-2164?

The footer should be across the bottom and the sidebar section on the right. The side is outside of the main div for some reason.

<div style="border:1px solid black">
  <header>
    <h2>Web Page</h2>
  </header>
  <nav>page 1 page 2 page 3</nav>
  <div style="float:left;width:50%;border:1px solid black">
    <section>
      section 1
    </section>
    <article>Any article content goes here.</article>
    <section>
      <p>section 2</p>
      <p>section 2</p>
    </section>
  </div>
  <div style="float:right;width:50%;border:1px solid black">
    <aside><a href="/">a sidebar</a></aside>
  </div>
</div>
<footer style="width:100%">Copyright 2018</footer>

edited Sep 27 '18 at 15:10

j08691

197,815
30
248
265

asked Sep 27 '18 at 15:01

4thSpace

42,526
93
284
462

1

the first dupe deal with float element and the second one with border combined with width and no need width:100% for the footer it's by default – Temani Afif Sep 27 '18 at 15:04
1

clear the floats in the footer, or use flexbox instead of floats. – Funk Doc Sep 27 '18 at 15:04
@FunkDoc: There aren't any floats in the footer. But why doesn't the footer stretch across the bottom? – 4thSpace Sep 27 '18 at 15:19
@TemaniAfif: I removed the 100% but not sure what you mean on the other stuff. – 4thSpace Sep 27 '18 at 15:20
You 'll need to do some research on how floats work https://www.w3schools.com/howto/howto_css_clearfix.asp – Funk Doc Sep 27 '18 at 15:31
I meant you have 2 issues an each one is explained in each duplicate – Temani Afif Sep 27 '18 at 18:01

Why is DIV outside of containing DIV?

0 Answers0