2017-05-24 7 views
0

Ich brauche die Pockeat Position direkt neben der Seitenleiste, und ich habe versucht, viele der Lösungen, die ich im Internet gefunden, aber keiner von ihnen funktioniert.Ich kann div Schwimmer auf der rechten Seite nicht

Dies ist mein Code:

.header { 
 
\t  background-color:#ffffff; 
 
\t  top:0; 
 
\t  height:10%; 
 
\t  width:100%; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:56px; 
 
\t  padding:15px; 
 
\t  text-decoration:none; 
 
\t  float:center; 
 
\t  text-align:center; 
 
\t  top:2%; 
 
    } 
 

 
    .navbar { 
 
\t  position:relative; 
 
\t  display:inline-block; 
 
\t  text-align:center; 
 
\t  overflow:hidden; 
 
\t  background-color:#ffffff; 
 
\t  height:8%; 
 
\t  width: 100%; 
 
\t  border-top:4px solid #1c1919; 
 
\t  border-bottom:4px solid #1c1919; 
 
\t  padding:5px; 
 
    } 
 

 
    .navbar a { 
 
\t  text-align:center; 
 
\t  text-decoration:none; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:32px; 
 
\t  padding:0 30px; 
 
    } 
 

 
    .sidebar { 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  height:82%; 
 
\t  width:20%; 
 
\t  border-right:2px solid #1c1919; 
 
    }  
 

 
    button.accordion { 
 
\t  background-color: #f2f2f2; 
 
\t  color: #1c1919; 
 
\t  cursor: pointer; 
 
\t  padding: 18px; 
 
\t  width: 100%; 
 
\t  border: none; 
 
\t  text-align: left; 
 
\t  outline: none; 
 
\t  font-size: 15px; 
 
\t  transition: 0.4s; 
 
    } 
 

 
    button.accordion.active, button.accordion:hover { 
 
\t  opacity:0.7; 
 
    } 
 

 
    button.accordion:after { 
 
\t  content: '\002B'; 
 
\t  color: #1c1919; 
 
\t  font-weight: bold; 
 
\t  float: right; 
 
\t  margin-left: 5px; 
 
    } 
 

 
    button.accordion.active:after { 
 
\t  content: "\2212"; 
 
    } 
 

 
    div.panel { 
 
\t  padding: 0 18px; 
 
\t  background-color:#ffffff; 
 
\t  max-height: 0; 
 
\t  overflow: hidden; 
 
\t  transition: max-height 0.2s ease-out; 
 
\t 
 
    } 
 

 
    .panel li a { 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  font-size:15px; 
 
\t  text-align:left; 
 
\t  color: #1c1919; 
 
\t  padding:10px; 
 
\t  display:block; 
 
    } 
 

 
    .content-body { 
 
\t  background-color:#ffffff; 
 
\t  height:82%; 
 
\t  width:80%; 
 
\t  text-decoration:none; 
 
\t  padding:10px; 
 
\t  float:right; 
 
    } 
 

 
    .content { 
 
\t  height:60px; 
 
\t  width:50px; 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  padding:10px; 
 
\t  font-size:20px; 
 
\t  display:block; 
 
    }
<!navbar> 
 
    <div class="navbar"> 
 
\t  <a href="#Newest">HOME</a> 
 
\t  <a href="#Newest">NEWEST</a> 
 
\t  <a href="#Recommended">RECOMMENDED</a> 
 
\t  <a href="#ATF">ALL TIME FAVE</a> 
 
\t  <a href="#Newest">CONTACT US</a> 
 
    </div> 
 

 
    <!sidebar> \t 
 
    <div class="sidebar"> 
 
\t  <button class="accordion">Gadgets</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Camera</a></li> 
 
\t \t \t \t  <li><a href="#">Watch</a></li> 
 
\t \t \t \t  <li><a href="#">Music</a></li> 
 
\t \t \t \t  <li><a href="#">Phone</a></li> 
 
\t \t \t \t  <li><a href="#">Bracelet</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Furniture</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Wheelchair</a></li> 
 
\t \t \t \t  <li><a href="#">Lights</a></li> 
 
\t \t \t \t  <li><a href="#">Table/ Chair</a></li> 
 
\t \t \t \t  <li><a href="#">Storage</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Lifestyle</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Window Blinds</a></li> 
 
\t \t \t \t  <li><a href="#">Ornaments</a></li> 
 
\t \t \t \t  <li><a href="#">Mask</a></li> 
 
\t \t \t \t  <li><a href="#">Socks</a></li> 
 
\t \t \t \t  <li><a href="#">Gardening</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Instruments</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Guitar</a></li> 
 
\t \t \t \t  <li><a href="#">Flute</a></li> 
 
\t \t \t \t  <li><a href="#">Tuner</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Kitchen/Bathroom</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Ready-to-Eat</a></li> 
 
\t \t \t \t  <li><a href="#">Bag</a></li> 
 
\t \t \t \t  <li><a href="#">Pot</a></li> 
 
\t \t \t  \t <li><a href="#">Kit</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Pet</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Cat</a></li> 
 
\t \t \t \t  <li><a href="#">Dog</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Stationery</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Pen Pouch</a></li> 
 
\t \t \t \t  <li><a href="#">Clock</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Toy</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Block</a></li> 
 
\t \t \t \t  <li><a href="#">Doll</a></li> 
 
\t \t \t \t  <li><a href="#">Card</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Other</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Pill Case</a></li> 
 
\t \t \t \t  <li><a href="#">Fitness</a></li> 
 
\t \t \t \t  <li><a href="#">Bicycle</a></li> 
 
\t \t \t \t  <li><a href="#">Wine</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
    </div> 
 
    <!content> 
 
    <div class="content-body"> 
 
\t  <div class="content"> 
 
\t \t  <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
\t \t  <br>Pockeat 
 
\t  </div> 
 

 
    </div>

Ich bin verwirrt, ich weiß nicht, wo ich falsch gemacht habe. Bitte hilf mir, es herauszufinden! Danke im Voraus!

Antwort

0

Ihre Grenze von 2% isst in Ihre Breite der Seitenleiste, was insgesamt 22% ergibt, also muss Ihre Seitenleiste 18% mit einer 2% Grenze sein, siehe aktualisierten CSS. Ich habe auch alle Ihre Höhenattribute entfernt und sie werden nicht benötigt. Der Inhalt innerhalb der divs passt sich natürlich an. Eine weitere Änderung, die ich vorgenommen habe, besteht darin, die Schriftart, die Sie verwenden, global zu machen, indem Sie sie in den CSS-Selektor "body" einfügen.

body { 
    font-family:century gothic; 
} 
.header { 
    background-color:#ffffff; 
    width:100%; 
    color:#1c1919; 
    font-size:56px; 
    padding:15px; 
    text-decoration:none; 
    float:center; 
    text-align:center; 
    top:2%; 
} 

.navbar { 
    position:relative; 
    display:inline-block; 
    text-align:center; 
    overflow:hidden; 
    background-color:#ffffff; 
    width: 100%; 
    border-top:4px solid #1c1919; 
    border-bottom:4px solid #1c1919; 
    padding:5px; 
} 

.navbar a { 
    text-align:center; 
    text-decoration:none; 
    color:#1c1919; 
    font-size:32px; 
    padding:0 30px; 
} 

.sidebar { 
    background-color:#ffffff; 
    text-decoration:none; 
    width:18%; 
    border-right:2px solid #1c1919; 
    float:left; 
}  

button.accordion { 
    background-color: #f2f2f2; 
    color: #1c1919; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
    opacity:0.7; 
} 

button.accordion:after { 
    content: '\002B'; 
    color: #1c1919; 
    font-weight: bold; 
    float: right; 
    margin-left: 5px; 
} 

button.accordion.active:after { 
    content: "\2212"; 
} 

div.panel { 
    padding: 0 18px; 
    background-color:#ffffff; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out; 
} 

.panel li a { 
    text-decoration:none; 
    font-size:15px; 
    text-align:left; 
    color: #1c1919; 
    padding:10px; 
    display:block; 
} 

.content-body { 
    background-color:#ffffff; 
    width:80%; 
    text-decoration:none; 
    padding:10px; 
    float:right; 
} 
.content { 
    background-color:#ffffff; 
    text-decoration:none; 
    font-size:20px; 
    display:block; 
} 
+0

Danke! Es löst das Problem! – Alex

0

Fügen Sie einfach float:left zu Ihrem sidebar div & hinzufügen box-sizing zu global hinzu.
prüfen aktualisiert Schnipsel unten:

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.header { 
 
    background-color: #ffffff; 
 
    top: 0; 
 
    height: 10%; 
 
    width: 100%; 
 
    color: #1c1919; 
 
    font-family: century gothic; 
 
    font-size: 56px; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    float: center; 
 
    text-align: center; 
 
    top: 2%; 
 
} 
 

 
.navbar { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background-color: #ffffff; 
 
    height: 8%; 
 
    width: 100%; 
 
    border-top: 4px solid #1c1919; 
 
    border-bottom: 4px solid #1c1919; 
 
    padding: 5px; 
 
} 
 

 
.navbar a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #1c1919; 
 
    font-family: century gothic; 
 
    font-size: 32px; 
 
    padding: 0 30px; 
 
} 
 

 
.sidebar { 
 
    background-color: #ffffff; 
 
    text-decoration: none; 
 
    font-family: century gothic; 
 
    height: 82%; 
 
    width: 20%; 
 
    border-right: 2px solid #1c1919; 
 
    float: left; 
 
} 
 

 
button.accordion { 
 
    background-color: #f2f2f2; 
 
    color: #1c1919; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    opacity: 0.7; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #1c1919; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: #ffffff; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
} 
 

 
.panel li a { 
 
    text-decoration: none; 
 
    font-family: century gothic; 
 
    font-size: 15px; 
 
    text-align: left; 
 
    color: #1c1919; 
 
    padding: 10px; 
 
    display: block; 
 
} 
 

 
.content-body { 
 
    background-color: #ffffff; 
 
    height: 82%; 
 
    width: 80%; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    float: right; 
 
} 
 

 
.content { 
 
    height: 60px; 
 
    width: 50px; 
 
    background-color: #ffffff; 
 
    text-decoration: none; 
 
    font-family: century gothic; 
 
    padding: 10px; 
 
    font-size: 20px; 
 
    display: block; 
 
}

 
<div class="navbar"> 
 
    <a href="#Newest">HOME</a> 
 
    <a href="#Newest">NEWEST</a> 
 
    <a href="#Recommended">RECOMMENDED</a> 
 
    <a href="#ATF">ALL TIME FAVE</a> 
 
    <a href="#Newest">CONTACT US</a> 
 
</div> 
 

 

 
<div class="sidebar"> 
 
    <button class="accordion">Gadgets</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Camera</a></li> 
 
      <li><a href="#">Watch</a></li> 
 
      <li><a href="#">Music</a></li> 
 
      <li><a href="#">Phone</a></li> 
 
      <li><a href="#">Bracelet</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Furniture</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Wheelchair</a></li> 
 
      <li><a href="#">Lights</a></li> 
 
      <li><a href="#">Table/ Chair</a></li> 
 
      <li><a href="#">Storage</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Lifestyle</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Window Blinds</a></li> 
 
      <li><a href="#">Ornaments</a></li> 
 
      <li><a href="#">Mask</a></li> 
 
      <li><a href="#">Socks</a></li> 
 
      <li><a href="#">Gardening</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Instruments</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Guitar</a></li> 
 
      <li><a href="#">Flute</a></li> 
 
      <li><a href="#">Tuner</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Kitchen/Bathroom</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Ready-to-Eat</a></li> 
 
      <li><a href="#">Bag</a></li> 
 
      <li><a href="#">Pot</a></li> 
 
      <li><a href="#">Kit</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Pet</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Cat</a></li> 
 
      <li><a href="#">Dog</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Stationery</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Pen Pouch</a></li> 
 
      <li><a href="#">Clock</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Toy</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Block</a></li> 
 
      <li><a href="#">Doll</a></li> 
 
      <li><a href="#">Card</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Other</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Pill Case</a></li> 
 
      <li><a href="#">Fitness</a></li> 
 
      <li><a href="#">Bicycle</a></li> 
 
      <li><a href="#">Wine</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<div class="content-body"> 
 
    <div class="content"> 
 
     <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
     <br>Pockeat 
 
    </div> 
 

 
</div>

+4

Bitte senden Sie gerade nicht ein Ausschnitt. Erkläre, was du geändert hast. –

1

1. Keine float haben .sidebar, 2nd Gesamt width von beiden (dh .sidebar and .content-body) sollte weniger als 100% sein, wie Sie eine border-right-side von hinzugefügt. Seitenleiste wie unten,

\t  background-color:#ffffff; 
 
\t  top:0; 
 
\t  height:10%; 
 
\t  width:100%; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:56px; 
 
\t  padding:15px; 
 
\t  text-decoration:none; 
 
\t  float:center; 
 
\t  text-align:center; 
 
\t  top:2%; 
 
    } 
 

 
    .navbar { 
 
\t  position:relative; 
 
\t  display:inline-block; 
 
\t  text-align:center; 
 
\t  overflow:hidden; 
 
\t  background-color:#ffffff; 
 
\t  height:8%; 
 
\t  width: 100%; 
 
\t  border-top:4px solid #1c1919; 
 
\t  border-bottom:4px solid #1c1919; 
 
\t  padding:5px; 
 
    } 
 

 
    .navbar a { 
 
\t  text-align:center; 
 
\t  text-decoration:none; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:32px; 
 
\t  padding:0 30px; 
 
    } 
 

 
    .sidebar { 
 
\t  background:#fff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  height:82%; 
 
\t  width:20%; 
 
\t  border-right:2px solid #1c1919; 
 
     float:left; 
 
     overflow:hidden; 
 
    }  
 

 
    button.accordion { 
 
\t  background-color: #f2f2f2; 
 
\t  color: #1c1919; 
 
\t  cursor: pointer; 
 
\t  padding: 18px; 
 
\t  width: 100%; 
 
\t  border: none; 
 
\t  text-align: left; 
 
\t  outline: none; 
 
\t  font-size: 15px; 
 
\t  transition: 0.4s; 
 
    } 
 

 
    button.accordion.active, button.accordion:hover { 
 
\t  opacity:0.7; 
 
    } 
 

 
    button.accordion:after { 
 
\t  content: '\002B'; 
 
\t  color: #1c1919; 
 
\t  font-weight: bold; 
 
\t  float: right; 
 
\t  margin-left: 5px; 
 
    } 
 

 
    button.accordion.active:after { 
 
\t  content: "\2212"; 
 
    } 
 

 
    div.panel { 
 
\t  padding: 0 18px; 
 
\t  background-color:#ffffff; 
 
\t  max-height: 0; 
 
\t  overflow: hidden; 
 
\t  transition: max-height 0.2s ease-out; 
 
\t 
 
    } 
 

 
    .panel li a { 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  font-size:15px; 
 
\t  text-align:left; 
 
\t  color: #1c1919; 
 
\t  padding:10px; 
 
\t  display:block; 
 
    } 
 

 
    .content-body { 
 
\t  background-color:#ffffff; 
 
\t  height:82%; 
 
\t  width:calc(80% - 5%); 
 
\t  text-decoration:none; 
 
\t  padding:10px; 
 
\t  float:right; 
 
    } 
 

 
    .content { 
 
\t  height:60px; 
 
\t  width:50px; 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  padding:10px; 
 
\t  font-size:20px; 
 
\t  display:block; 
 
    }
<div class="navbar"> 
 
    <a href="#Newest">HOME</a> 
 
    <a href="#Newest">NEWEST</a> 
 
    <a href="#Recommended">RECOMMENDED</a> 
 
    <a href="#ATF">ALL TIME FAVE</a> 
 
    <a href="#Newest">CONTACT US</a> 
 
</div> 
 

 
<div class="sidebar"> 
 
    <button class="accordion">Gadgets</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Camera</a></li> 
 
       <li><a href="#">Watch</a></li> 
 
       <li><a href="#">Music</a></li> 
 
       <li><a href="#">Phone</a></li> 
 
       <li><a href="#">Bracelet</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Furniture</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Wheelchair</a></li> 
 
       <li><a href="#">Lights</a></li> 
 
       <li><a href="#">Table/ Chair</a></li> 
 
       <li><a href="#">Storage</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Lifestyle</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Window Blinds</a></li> 
 
       <li><a href="#">Ornaments</a></li> 
 
       <li><a href="#">Mask</a></li> 
 
       <li><a href="#">Socks</a></li> 
 
       <li><a href="#">Gardening</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Instruments</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Guitar</a></li> 
 
       <li><a href="#">Flute</a></li> 
 
       <li><a href="#">Tuner</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Kitchen/Bathroom</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Ready-to-Eat</a></li> 
 
       <li><a href="#">Bag</a></li> 
 
       <li><a href="#">Pot</a></li> 
 
       <li><a href="#">Kit</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Pet</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Cat</a></li> 
 
       <li><a href="#">Dog</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Stationery</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Pen Pouch</a></li> 
 
       <li><a href="#">Clock</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Toy</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Block</a></li> 
 
       <li><a href="#">Doll</a></li> 
 
       <li><a href="#">Card</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Other</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Pill Case</a></li> 
 
       <li><a href="#">Fitness</a></li> 
 
       <li><a href="#">Bicycle</a></li> 
 
       <li><a href="#">Wine</a></li> 
 
      </ul> 
 
     </div> 
 
</div> 
 
<div class="content-body"> 
 
    <div class="content"> 
 
     <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
     <br>Pockeat 
 
    </div> 
 

 
</div>

0

Es ist, weil Ihre Sidebar und Ihr Inhalt-Körper zu groß sind, um zu schweben.

Wenn Sie Breite: 80% mit einer Auffüllung verwenden möchten, sollten Sie verwenden: width: calc(80% - padding), gleich für Grenzen.

.header { 
 
\t  background-color:#ffffff; 
 
\t  top:0; 
 
\t  height:10%; 
 
\t  width:100%; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:56px; 
 
\t  padding:15px; 
 
\t  text-decoration:none; 
 
\t  float:center; 
 
\t  text-align:center; 
 
\t  top:2%; 
 
    } 
 

 
    .navbar { 
 
\t  position:relative; 
 
\t  display:inline-block; 
 
\t  text-align:center; 
 
\t  overflow:hidden; 
 
\t  background-color:#ffffff; 
 
\t  height:8%; 
 
\t  width: 100%; 
 
\t  border-top:4px solid #1c1919; 
 
\t  border-bottom:4px solid #1c1919; 
 
\t  padding:5px; 
 
    } 
 

 
    .navbar a { 
 
\t  text-align:center; 
 
\t  text-decoration:none; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:32px; 
 
\t  padding:0 30px; 
 
    } 
 

 
    .sidebar { 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  height:82%; 
 
\t  width:20%; 
 
     float: left; 
 
    }  
 

 
    button.accordion { 
 
\t  background-color: #f2f2f2; 
 
\t  color: #1c1919; 
 
\t  cursor: pointer; 
 
\t  padding: 18px; 
 
\t  width: 100%; 
 
\t  border: none; 
 
\t  text-align: left; 
 
\t  outline: none; 
 
\t  font-size: 15px; 
 
\t  transition: 0.4s; 
 
    } 
 

 
    button.accordion.active, button.accordion:hover { 
 
\t  opacity:0.7; 
 
    } 
 

 
    button.accordion:after { 
 
\t  content: '\002B'; 
 
\t  color: #1c1919; 
 
\t  font-weight: bold; 
 
\t  float: right; 
 
\t  margin-left: 5px; 
 
    } 
 

 
    button.accordion.active:after { 
 
\t  content: "\2212"; 
 
    } 
 

 
    div.panel { 
 
\t  padding: 0 18px; 
 
\t  background-color:#ffffff; 
 
\t  max-height: 0; 
 
\t  overflow: hidden; 
 
\t  transition: max-height 0.2s ease-out; 
 
\t 
 
    } 
 

 
    .panel li a { 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  font-size:15px; 
 
\t  text-align:left; 
 
\t  color: #1c1919; 
 
\t  padding:10px; 
 
\t  display:block; 
 
    } 
 

 
    .content-body { 
 
\t  background-color:#ffffff; 
 
\t  height:82%; 
 
\t  width:80%; 
 
\t  text-decoration:none; 
 
\t  float:left; 
 
    } 
 

 
    .content { 
 
\t  height:60px; 
 
\t  width:50px; 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  padding:10px; 
 
\t  font-size:20px; 
 
\t  display:block; 
 
    }
<!navbar> 
 
    <div class="navbar"> 
 
\t  <a href="#Newest">HOME</a> 
 
\t  <a href="#Newest">NEWEST</a> 
 
\t  <a href="#Recommended">RECOMMENDED</a> 
 
\t  <a href="#ATF">ALL TIME FAVE</a> 
 
\t  <a href="#Newest">CONTACT US</a> 
 
    </div> 
 

 
    <!sidebar> \t 
 
    <div class="sidebar"> 
 
\t  <button class="accordion">Gadgets</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Camera</a></li> 
 
\t \t \t \t  <li><a href="#">Watch</a></li> 
 
\t \t \t \t  <li><a href="#">Music</a></li> 
 
\t \t \t \t  <li><a href="#">Phone</a></li> 
 
\t \t \t \t  <li><a href="#">Bracelet</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Furniture</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Wheelchair</a></li> 
 
\t \t \t \t  <li><a href="#">Lights</a></li> 
 
\t \t \t \t  <li><a href="#">Table/ Chair</a></li> 
 
\t \t \t \t  <li><a href="#">Storage</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Lifestyle</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Window Blinds</a></li> 
 
\t \t \t \t  <li><a href="#">Ornaments</a></li> 
 
\t \t \t \t  <li><a href="#">Mask</a></li> 
 
\t \t \t \t  <li><a href="#">Socks</a></li> 
 
\t \t \t \t  <li><a href="#">Gardening</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Instruments</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Guitar</a></li> 
 
\t \t \t \t  <li><a href="#">Flute</a></li> 
 
\t \t \t \t  <li><a href="#">Tuner</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Kitchen/Bathroom</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Ready-to-Eat</a></li> 
 
\t \t \t \t  <li><a href="#">Bag</a></li> 
 
\t \t \t \t  <li><a href="#">Pot</a></li> 
 
\t \t \t  \t <li><a href="#">Kit</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Pet</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Cat</a></li> 
 
\t \t \t \t  <li><a href="#">Dog</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Stationery</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Pen Pouch</a></li> 
 
\t \t \t \t  <li><a href="#">Clock</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Toy</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Block</a></li> 
 
\t \t \t \t  <li><a href="#">Doll</a></li> 
 
\t \t \t \t  <li><a href="#">Card</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Other</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Pill Case</a></li> 
 
\t \t \t \t  <li><a href="#">Fitness</a></li> 
 
\t \t \t \t  <li><a href="#">Bicycle</a></li> 
 
\t \t \t \t  <li><a href="#">Wine</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
    </div> 
 
    <!content> 
 
    <div class="content-body"> 
 
\t  <div class="content"> 
 
\t \t  <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
\t \t  <br>Pockeat 
 
\t  </div> 
 

 
    </div>

0

ich denke, es Ihr Problem lösen wird.

.header { 
 
\t  background-color:#ffffff; 
 
\t  top:0; 
 
\t  height:10%; 
 
\t  width:100%; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:56px; 
 
\t  padding:15px; 
 
\t  text-decoration:none; 
 
\t  float:center; 
 
\t  text-align:center; 
 
\t  top:2%; 
 
    } 
 

 
    .navbar { 
 
\t  position:relative; 
 
\t  display:inline-block; 
 
\t  text-align:center; 
 
\t  overflow:hidden; 
 
\t  background-color:#ffffff; 
 
\t  height:8%; 
 
\t  width: 100%; 
 
\t  border-top:4px solid #1c1919; 
 
\t  border-bottom:4px solid #1c1919; 
 
\t  padding:5px; 
 
    } 
 

 
    .navbar a { 
 
\t  text-align:center; 
 
\t  text-decoration:none; 
 
\t  color:#1c1919; 
 
\t  font-family:century gothic; 
 
\t  font-size:32px; 
 
\t  padding:0 30px; 
 
    } 
 

 
    .sidebar { 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  height:82%; 
 
\t  width:20%; 
 
\t  border-right:2px solid #1c1919; 
 
     float: left; 
 
    }  
 

 
    button.accordion { 
 
\t  background-color: #f2f2f2; 
 
\t  color: #1c1919; 
 
\t  cursor: pointer; 
 
\t  padding: 18px; 
 
\t  width: 100%; 
 
\t  border: none; 
 
\t  text-align: left; 
 
\t  outline: none; 
 
\t  font-size: 15px; 
 
\t  transition: 0.4s; 
 
    } 
 

 
    button.accordion.active, button.accordion:hover { 
 
\t  opacity:0.7; 
 
    } 
 

 
    button.accordion:after { 
 
\t  content: '\002B'; 
 
\t  color: #1c1919; 
 
\t  font-weight: bold; 
 
\t  float: right; 
 
\t  margin-left: 5px; 
 
    } 
 

 
    button.accordion.active:after { 
 
\t  content: "\2212"; 
 
    } 
 

 
    div.panel { 
 
\t  padding: 0 18px; 
 
\t  background-color:#ffffff; 
 
\t  max-height: 0; 
 
\t  overflow: hidden; 
 
\t  transition: max-height 0.2s ease-out; 
 
\t 
 
    } 
 

 
    .panel li a { 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  font-size:15px; 
 
\t  text-align:left; 
 
\t  color: #1c1919; 
 
\t  padding:10px; 
 
\t  display:block; 
 
    } 
 

 
    .content-body { 
 
\t  background-color:#ffffff; 
 
\t  height:82%; 
 
\t  width:calc(100% - 20% - 22px); 
 
\t  text-decoration:none; 
 
\t  padding:10px; 
 
\t  float:right; 
 
    } 
 

 
    .content { 
 
\t  height:60px; 
 
\t  width:50px; 
 
\t  background-color:#ffffff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  padding:10px; 
 
\t  font-size:20px; 
 
\t  display:block; 
 
    }
<!--navbar --> 
 
    <div class="navbar"> 
 
\t  <a href="#Newest">HOME</a> 
 
\t  <a href="#Newest">NEWEST</a> 
 
\t  <a href="#Recommended">RECOMMENDED</a> 
 
\t  <a href="#ATF">ALL TIME FAVE</a> 
 
\t  <a href="#Newest">CONTACT US</a> 
 
    </div> 
 
    
 
    <div id="wrapper"> 
 
    <!--sidebar --> \t 
 
    <div class="sidebar"> 
 
\t  <button class="accordion">Gadgets</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Camera</a></li> 
 
\t \t \t \t  <li><a href="#">Watch</a></li> 
 
\t \t \t \t  <li><a href="#">Music</a></li> 
 
\t \t \t \t  <li><a href="#">Phone</a></li> 
 
\t \t \t \t  <li><a href="#">Bracelet</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Furniture</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Wheelchair</a></li> 
 
\t \t \t \t  <li><a href="#">Lights</a></li> 
 
\t \t \t \t  <li><a href="#">Table/ Chair</a></li> 
 
\t \t \t \t  <li><a href="#">Storage</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Lifestyle</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Window Blinds</a></li> 
 
\t \t \t \t  <li><a href="#">Ornaments</a></li> 
 
\t \t \t \t  <li><a href="#">Mask</a></li> 
 
\t \t \t \t  <li><a href="#">Socks</a></li> 
 
\t \t \t \t  <li><a href="#">Gardening</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Instruments</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Guitar</a></li> 
 
\t \t \t \t  <li><a href="#">Flute</a></li> 
 
\t \t \t \t  <li><a href="#">Tuner</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Kitchen/Bathroom</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Ready-to-Eat</a></li> 
 
\t \t \t \t  <li><a href="#">Bag</a></li> 
 
\t \t \t \t  <li><a href="#">Pot</a></li> 
 
\t \t \t  \t <li><a href="#">Kit</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Pet</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Cat</a></li> 
 
\t \t \t \t  <li><a href="#">Dog</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Stationery</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Pen Pouch</a></li> 
 
\t \t \t \t  <li><a href="#">Clock</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Toy</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Block</a></li> 
 
\t \t \t \t  <li><a href="#">Doll</a></li> 
 
\t \t \t \t  <li><a href="#">Card</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
\t  <button class="accordion">Other</button> 
 
\t \t  <div class="panel"> 
 
\t \t \t  <ul> 
 
\t \t \t \t  <li><a href="#">Pill Case</a></li> 
 
\t \t \t \t  <li><a href="#">Fitness</a></li> 
 
\t \t \t \t  <li><a href="#">Bicycle</a></li> 
 
\t \t \t \t  <li><a href="#">Wine</a></li> 
 
\t \t \t  </ul> 
 
\t \t  </div> 
 
    </div> 
 
    <!--content--> 
 
    <div class="content-body"> 
 
\t  <div class="content"> 
 
\t \t  <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
\t \t  <br>Pockeat 
 
\t  </div> 
 

 
    </div> 
 
    </div> 
 

Verwandte Themen