"wrapper" not working in html5 code

Question

 <html>
    <style>
    #wrapper{
     width: 960px;
     margin: 0;
     border:dashed yellow;
     background-color: orange;
    }
    
    header{
     float: left;
     width: 960px;
     border: dotted blue;
    }
    
    nav{
     float: left;
     width: 960px;
     border: thin double pink;
    }
    
    article{
     float: left;
     width: 730px;
     margin-left: 115px;
     margin-right: 115px;
     border: groove black;
     background-color: white;
    }
    
    #sec1{
     float: left;
     width: 270px;
     height: 500px;
     margin-left: 45px;
     margin-right: 45px;
     margin-top: 50px;
     background-color: turquoise;
     border-radius: 10px;
     
    }
    
    #h1sec1{
     float: left;
     width: 100%;
     text-align: center;
    }
    
    #psec1{
     float: left;
     width: 100%;
    }
    
    #sec2{
     float: left;
     width: 270px;
     height: 500px;
     margin-left: 45px;
     margin-right: 45px;
     margin-top: 50px;
     background-color: turquoise; 
     border-radius: 10px;
    }
    
    #h1sec2{
     float: left;
     width: 100%;
     text-align: center;
    }
    
    #psec2{
     float: left;
     width: 100%;
    }
    </style>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
        <div id="wrapper">
            <header></header>
            <nav></nav>
            <article>
                <section id="sec1">
                 <h1 id="h1sec1">Section 1</h1>
                    <p id="psec1"></p>
                </section>
                
                <section id="sec2">
                 <h1 id="h1sec2">Section 2</h1>
                    <p id="psec2"></p>
                </section>
                
                 <section id="sec1">
                 <h1 id="h1sec1">Section 1</h1>
                    <p id="psec1"></p>
                </section>
                
                <section id="sec2">
                 <h1 id="h1sec2">Section 2</h1>
                    <p id="psec2"></p>
                </section>
            </article>
         </div>
    </body>
    </html>

Wrapper will not surround article tag and contents. I'm not sure if this is just a simple math error on my part, or if the I need to adjust the margins and float it. Either way, please help me out here.

Your question is unclear. Consider making a fiddle, describing what isn't working, and what you've tried. — jmargolisvt, Sep 05 '15 at 22:37

Ankit Chaudhary · Answer 1 · 2015-09-05T23:03:59.927

Changes done in the code:

Removed all float:left from the style.As it bring the child element out of its parent
Gave display:inline-block for all sections so that they can come in one row if width is available by behaving as an inline element.
removed the ids sec1,h1sec1,psec1,sec2,h1sec2 & psec2 and added classes sec,h1sec & psec as they were having common styles and we should always use unique id for each element.

#wrapper {
  width: 960px;
  margin: 0;
  border: dashed yellow;
  background-color: orange;
}
header {
  width: 960px;
  border: dotted blue;
}
nav {
  width: 960px;
  border: thin double pink;
}
article {
  width: 730px;
  margin-left: 115px;
  margin-right: 115px;
  border: groove black;
  background-color: white;
}
.sec {
  display: inline-block;
  width: 270px;
  height: 500px;
  margin-left: 45px;
  margin-right: 45px;
  margin-top: 50px;
  background-color: turquoise;
  border-radius: 10px;
}
.h1sec {
  width: 100%;
  text-align: center;
}
.psec {
  width: 100%;
}

<html>
<style>
</style>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
</head>

<body>
  <div id="wrapper">
    <header></header>
    <nav></nav>
    <article>
      <section class="sec">
        <h1 class="h1sec">Section 1</h1>
        <p class="psec"></p>
      </section>

      <section class="sec">
        <h1 class="h1sec">Section 2</h1>
        <p class="psec"></p>
      </section>

      <section class="sec">
        <h1 class="h1sec">Section 1</h1>
        <p class="psec"></p>
      </section>

      <section class="sec">
        <h1 class="h1sec">Section 2</h1>
        <p class="psec"></p>
      </section>
    </article>
  </div>
</body>

</html>

score 0 · Answer 2 · edited May 23 '17 at 12:29

You just need a method of "clearing the floats"...a so-called "ClearFix"

There are number of methods discussed here.

#wrapper {
  width: 960px;
  margin: 0;
  border: dashed yellow;
  background-color: orange;
  overflow:auto;
}

    #wrapper {
      width: 960px;
      margin: 0;
      border: dashed yellow;
      background-color: orange;
      overflow:auto;
    }
    header {
      float: left;
      width: 960px;
      border: dotted blue;

    }
    nav {
      float: left;
      width: 960px;
      border: thin double pink;
    }
    article {
      float: left;
      width: 730px;
      margin-left: 115px;
      margin-right: 115px;
      border: groove black;
      background-color: white;
    }
    #sec1 {
      float: left;
      width: 270px;
      height: 500px;
      margin-left: 45px;
      margin-right: 45px;
      margin-top: 50px;
      background-color: turquoise;
      border-radius: 10px;
    }
    #h1sec1 {
      float: left;
      width: 100%;
      text-align: center;
    }
    #psec1 {
      float: left;
      width: 100%;
    }
    #sec2 {
      float: left;
      width: 270px;
      height: 500px;
      margin-left: 45px;
      margin-right: 45px;
      margin-top: 50px;
      background-color: turquoise;
      border-radius: 10px;
    }
    #h1sec2 {
      float: left;
      width: 100%;
      text-align: center;
    }
    #psec2 {
      float: left;
      width: 100%;
    }

<div id="wrapper">
  <header></header>
  <nav></nav>
  <article>
    <section id="sec1">
      <h1 id="h1sec1">Section 1</h1>
      <p id="psec1"></p>
    </section>

    <section id="sec2">
      <h1 id="h1sec2">Section 2</h1>
      <p id="psec2"></p>
    </section>

    <section id="sec1">
      <h1 id="h1sec1">Section 1</h1>
      <p id="psec1"></p>
    </section>

    <section id="sec2">
      <h1 id="h1sec2">Section 2</h1>
      <p id="psec2"></p>
    </section>
  </article>
</div>

"wrapper" not working in html5 code

2 Answers2