Was muss ich in meinem CSS hier ändern?

Question

Ich hatte früher Tabellen, um den Inhalt anzuzeigen, und Leute rieten mir, Tabellen zu entfernen und CSS für bessere Formatierung zu verwenden.

Ich bin neu in allem. Mein Problem ist, ich habe Inhalt und Seitenleiste. Ich möchte es wie

content   | Sidebar 

aber jetzt mit dem aktuellen Styling angezeigt werden Ich habe es angezeigt wird wie

content 
| 
Sidebar 

Können Sie mir bitte korrigieren.

 <style type="text/css"> 

    .csscontent 
    { 

      margin-right: 500px; 



    } 

    .csssidebar 
    { 
     float: right; 
     width: 500px; 
     background: darkgreen; 
     /* height:500px; */ 



    } 


</style> 

Wenn ich

<div class="Content"> 
    all the content 
<div class="sidebar"> 
<Image> 
</div> 

hinzufügen Wenn ich Sidebar in den Inhalt Fügen Sie das Bild unter dem Inhalt angezeigt wird immer rechten Rand von 500px zu verlassen.

Wenn ich Sidebar außerhalb des Inhalts hinzufüge, wird das Bild unterhalb des Inhalts angezeigt.

<div class="Content"> 
    all the content 
    </div> 

    <div class="sidebar"> 
    <Image> 
    </div> 

Ich mag sowohl Inhalt und Seitenleiste Seiten

Answer 1

In der HTML-Datei müssen Sie zuerst die Floating-Elemente und dann die Floating-Elemente festlegen. Weil das Floating-Element die gesamte "Ebene" der Website blockieren wird und die Floating-Elemente darunter platziert werden.

So sollten Ihre HTML wie folgt aussehen:

<div class="sidebar"> 
    <Image> 
    </div> 
    <div class="Content"> 
    all the content 
    </div> 

Andere dann, dass es gut aussieht.

Answer 2

Float sowohl nach links als sie angezeigt werden, so dass sie gegeneinander stapeln.

.Content 
    { 
      margin-right: 500px; 
      float: left; 
    } 

    .sidebar 
    { 
     float: left; 
     width: 500px; 
     background: darkgreen; 
    } 

Answer 3

Add Schwimmer .csscontent Klasse wie

.csscontent 
    { 
      margin-right: 500px; 
      Float:left; 
    } 

Answer 4

.content, .sidebar { 
    float: left; 
} 

treiben beide divs wie beide Inline zeigt das oben links.

Sie können dann für jede Klasse ein bestimmtes Styling anwenden. Die Zuweisung einer Breite zu .content bestimmt dann, wo .sidebar angezeigt wird ...

Answer 5

Oder wenn Sie nur die Seitenleiste nach rechts schweben möchten, ohne den Inhalt zu schweben, sollten Sie die Seitenleiste über den Inhalt im HTML setzen.

Natürlich müssen Sie noch die Klassennamen korrigieren ...

Answer 6

Sie einen Wrapper für beide Elemente hinzufügen können.

<div id="wrapper"> 

    <div id="content"> 
     all the content 
    </div> 

    <div id="sidebar"> 
     <img/> 
    </div> 

</div> 

div#wrapper { 
    position:relative; 
    overflow:hidden; 
    width:800px; 
} 

div#content { 
    float:left; 
    width:600px; 
} 

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

Answer 7

siehe Geige für Code und Demo

Geige: http://jsfiddle.net/g42x2/1/

Demo: http://jsfiddle.net/g42x2/1/embedded/result/

SS: