CSS Breite 100% - margin-right
Derzeit haben 2 divs...Links ist voller Inhalt und rechts eine sidebar 300px breit. Ich möchte Sie nebeneinander, Links und rechts, aber kann nicht scheinen, um es richtig zu machen. Ich brauche den linken div um den gesamten Bildschirm belegen weniger die 300px für den rechten div.
Ist es möglich den rechten div im linken divs rechten Rand?
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container {
width: 100%
}
#left {
float: left;
margin-right: 350px;
}
#right {
float: left;
width: 300px;
padding-left: 25px;
}
edit:
Kann ich auch die Rechte Seite position: fixed?
Lösungen, die unten arbeiten, aber wenn ich das Rechte div position: fixed; die div ist nicht mehr rechts von der linken div.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ändern Sie die Rechte und linke div-Bestellung, wie:
Entfernen Sie die
float:left
aus#left
in der CSS, und ändern Sie#right
zufloat:right
EDIT:
Meine Lösung sollte mit
position: fixed;
nur daran erinnern hinzufügenright:0
zu den festen div.Ändern Sie Ihr markup zu:
Und CSS:
Das linke div wird automatisch bis der ganze Raum neben dem schwebte 'sidebar'.
Statt die Reihenfolge der Inhalte, können Sie einfach fügen Sie eine
width:100%
und negative Marge auf das #Links div.http://jsfiddle.net/daCrosby/FGMGB/
HTML
CSS
Bearbeiten
Aus deinem Kommentar anderswo hier müssen Sie
#right
zuposition:fixed
. Dadurch wird das element vollständig aus dem Stapel von Elementen, sofloat
unnötig ist (und nicht Arbeit sowieso). Stattdessen setzen Sie einfach die Feste Positionierung und du bist gut zu gehen.Entsprechenden CSS, mit gleiche HTML-Code wie oben
jsFiddle
fixed width
funktioniert nicht. JS FiddleWerfen Sie einen Blick auf:
Creating Liquid Layouts with Negative Margins (http://alistapart.com/article/negativemargins)
Das problem mit den Antworten ist, dass Sie können nicht wollen, um die Reihenfolge der Inhalte, weil Sie möglicherweise die Fähigkeit sich zu bewegen das Rechte div unter dem linken div in ein responsive design, das bekommen würde zunehmend schwieriger, wenn wir die Reihenfolge der Inhalte. Leider @DACrosby Antwort kann dazu führen, einige böse überschneidung der Rechte div auf der Oberseite des linken div ' s content.
Meine Lösung war, ein positives
padding-right
entspricht der negativenmargin-right
auf der linken div-Element, und legen Siebox-sizing: border-box
.Dies funktioniert mit oder ohne der
position:fixed;
rechts div.jsFiddle