Kann nicht mein Seitenleiste auf der rechten Seite der Inhalt?

Ich habe eine Webseite, und es hat zwei divs innerhalb des Containers- content und sidebar1. Ich weiß nicht warum, aber immer, wenn ich meine sidebar1 div auf der rechten Seite, nach der content div, Lande ich mit meiner sidebar unter, nicht neben ihm!

Mein code:

HTML

<div class="container">

  <div class="content">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="Content" -->Just some
    <!-- end .content -->
    dummy text.<!-- TemplateEndEditable --></div>
    <div class="sidebar1">
    </div>
  <div class="footer">
    Footer text<!--end .footer --></div>
<!-- end .container --></div>

CSS

.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 950px;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 960px;
    background-color: #000000;
    margin: 0 auto; 
}

Ich bin noch sehr neu auf HTML, und nicht verstehen mein problem. Vielen Dank im Voraus!

jsfiddle.net/EUtwK

InformationsquelleAutor JayD2208 | 2013-03-16

  1. 2

    Den Inhalt 10px kleiner als die Eltern, so gibt es keinen Raum für eine 192px sidebar daneben (20% von 960px).

    Könnte man etwas mehr machen wie diese:

    <div id="container">
    <div id="sidebar">Sidebar</div>
    <div id="content">Main content</div>
</div>

#container {
    width: 980px;
    margin: 0 auto;
}

#sidebar {
    float: right;
    width: 200px;
}

#content {
    overflow: hidden;
}

    Dem obigen code wird schwimmen die Seitenleiste auf der rechten Seite des Containers und dann den content-div wird dauern, bis alle restlichen Platz im container. Die overflow: hidden sagt der div ist zu beachten: der Schwebekörper bei der Entscheidung über die Größe, anstatt nur die Aufnahme die volle Breite des Containers ein. Damit dies funktioniert, MÜSSEN Sie die gefloateten Elemente vor der overflow: hidden element.

    jsFiddle

    Ich mochte Ihre Antwort, die meisten, nur weil es die beste Erklärung. Danke!

    InformationsquelleAutor James Coyle

  2. 0

    Versuchen Sie es mit float: left für Ihre .sidebar1 oder Sortieren Sie Ihre HTML, so dass die sidebar vor den content.

    InformationsquelleAutor Linus Caldwell

  3. 0

    Sie haben tatsächlich drei <div>s inside your container, ich weiß nicht, ob das beabsichtigt war. Und Sie sollten geben Sie Ihre .content eine width: 80%;.

    InformationsquelleAutor dezman

  4. 0

    Es hat zu tun mit der Tatsache, dass Ihre Elemente sind zu breit für die container. Entweder legen Sie Ihre sidebar hinein .Inhalte, oder stellen Sie Ihren breiten. Hier ist eine option:

    http://jsfiddle.net/cKMa2/2

    .sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 78%;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.footer {
    clear: both;
}

<div class="container">
    <div class="sidebar1">Some content Some content Some content</div>
    <div class="content">
         <h1>Heading</h1>

        <p>Just some dummy text.</p>
    </div>
    <div class="footer">Footer text</div>
</div>

    InformationsquelleAutor isherwood

  5. 0

    Das problem ist, dass Ihre Elemente floating in ein in der Größe veränderbares Fenster, so dass, wenn nicht genug Platz vorhanden ist die gefloateten Elemente gehen in die nächste Zeile.

    Gibt es eine einfache Lösung: setzen Sie die schwimmenden Elemente in einem container mit fester Breite nicht breit genug, um enthalten alle gefloateten Boxen.

    Ich bin nicht sicher, dass die Abmessungen des Bildschirms, sondern zum Beispiel, das funktionieren könnte:

    <div style="width: 1300px;">
    (Put the floated boxes here)
<div>

    InformationsquelleAutor Ozzy

Schreibe einen Kommentar