Wie verhindere ich das Überlappen dieser divs?

Question

Ich habe drei divs, innerhalb eines Inhalts div.

Behälterbreite 70%. Darin habe ich -Link, Breite 20%. -Content, Breite 60%. -Rechte, Breite 20%.

Ich möchte, dass Container 70% der Seitenbreite einnimmt und die inneren (links, Inhalt und rechts) 20%, 60% und 20% des Containers div.

Ich habe andere Fragen hier versucht, ich habe Google versucht, aber kann nicht scheinen, die richtige Antwort zu finden. Bitte hilf mir, dass sie sich nicht überschneiden.

Aber wenn ich die Größe neu den Browser, die divs überlappen. Wie folgt aus:

Hier ist der entsprechende CSS-Code:

#container{ 
    width: 70%; 
} 
#left { 
    float: left; 
    width: 20%; 
    min-width: 200px; 
} 
#content { 
    float: left; 
    width: 60%; 
    min-width: 600px; 
} 
#right { 
    float: right; 
    width: 20%; 
    min-width: 200px; 
} 

Answer 1

Entfernen Sie einfach die min-width von Ihrem CSS! Und geben Sie min-width dem Container mit margin: auto, um es zu zentrieren.

Versuchen Sie, diese CSS:

#container{ 
    width: 70%; 
    min-width: 1000px; 
    margin: auto; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

Check out Geige hier: http://jsfiddle.net/UaqU7/2/

Answer 2

die min-width CSS herausnehmen.

Sobald die Fensterbreite eine bestimmte Größe unterschreitet, haben diese Elemente keine andere Wahl als sich zu überlappen. Nehmen wir an, Ihr Fenster ist 1000px; dann wird der Behälter 700px sein. Aber mit den minimalen Breiten sind die divs im Container schon bei 1000px und überfließen den Container.

Answer 3

Sie müssen die min-width aus Ihrem CSS herausnehmen.

Wenn die Seite kleiner ist, verhindert die min-width, dass sie weiter schrumpft. So verursacht die Überlappung.

Answer 4

Hier gehen Sie, wenn Sie eine min Breite wollen, setzen Sie es auf dem Behälter

http://jsfiddle.net/VBSYu/1/

#container{ 
    width: 70%; 
    min-width: 1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
}​ 

Answer 5

Statt geben m In der Breite von Kind DIV's können Sie es #container geben. Schreiben wie folgt aus:

#container{ 
    width: 70%; 
    min-width:1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

prüfen diese http://jsfiddle.net/yLVsb/

Answer 6

hier die Geige ist seine adaequat http://jsfiddle.net/r42hH/2/