Pixel und Prozent in DIV-Layout kombinieren
Hallo zusammen,
es geht um folgendes Problem:
Ich habe ein Layout, bestehend aus 3 div Elementen, die nebeneinander angeordnet sind. (Siehe angehängtes Bild)
Das linke (schwarz) und das rechte (grün) div Element haben eine feste Breite in px, was wegen Grafiken notwendig ist.
Das mittlere (rot) div soll den Platz so ausfüllen, dass der gesamte Bildschirm eingenommen wird.
Weise ich dem roten div keine Breite zu, füllt es nur den Platz, der vom Text darin benötigt wird.
Eine Pixel oder Prozent Breite kann ich aber auch nicht geben, da die benutzer ja unterschiedliche Auflösungen haben.
Weise ich zb. die Breite 70% zu, sieht auf einem 1280x1024 Monitor alles gut aus, auf einem 1024x768 Monitor jedoch steht das rechte div dann unter dem Inhalt.
Kann mir jemand helfen, wie ich es hinbekomme, dass das schwarze und das grüne div Element eine feste Pixel-Breite haben und das rote div den restlichen Platz des Bildschirms ausfüllt?
Vielen Dank schon jetzt für alle antworten.
Der Html-Code:
Der CSS-Code:
es geht um folgendes Problem:
Ich habe ein Layout, bestehend aus 3 div Elementen, die nebeneinander angeordnet sind. (Siehe angehängtes Bild)
Das linke (schwarz) und das rechte (grün) div Element haben eine feste Breite in px, was wegen Grafiken notwendig ist.
Das mittlere (rot) div soll den Platz so ausfüllen, dass der gesamte Bildschirm eingenommen wird.
Weise ich dem roten div keine Breite zu, füllt es nur den Platz, der vom Text darin benötigt wird.
Eine Pixel oder Prozent Breite kann ich aber auch nicht geben, da die benutzer ja unterschiedliche Auflösungen haben.
Weise ich zb. die Breite 70% zu, sieht auf einem 1280x1024 Monitor alles gut aus, auf einem 1024x768 Monitor jedoch steht das rechte div dann unter dem Inhalt.
Kann mir jemand helfen, wie ich es hinbekomme, dass das schwarze und das grüne div Element eine feste Pixel-Breite haben und das rote div den restlichen Platz des Bildschirms ausfüllt?
Vielen Dank schon jetzt für alle antworten.
Der Html-Code:
<div id="container">
<div id="nav-left">
</div>
<div id="content">
</div>
<div id="nav-right">
</div>
</div>
Der CSS-Code:
#container {
width:100%;
}
#nav-left {
width:120px;
padding-left:30px;
float:left;
background-image:url(nav_left.jpg);
}
#content {
float:left;
}
# nav-right {
float:right;
width:280px;
background-image:url(nav-right.jpg);
}
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 157412
Url: https://administrator.de/forum/pixel-und-prozent-in-div-layout-kombinieren-157412.html
Ausgedruckt am: 23.12.2024 um 00:12 Uhr
6 Kommentare
Neuester Kommentar
Hallo DennisBauer,
ich würde dir hier empfehlen nur mit Prozentangaben zu arbeiten. Das wird dann auch wirklich vom Browser so aufgelöst und die Fehleranfälligkeit ist relativ gering.
Ich habe mal auf die Schnell deine 3 divs positioniert: Hier die CSS-Datei:
In der HTML-Datei solltest du es dann so anordnen:
Probier das einfach mal aus. Müsste klappen.
Grüße Tippexs
ich würde dir hier empfehlen nur mit Prozentangaben zu arbeiten. Das wird dann auch wirklich vom Browser so aufgelöst und die Fehleranfälligkeit ist relativ gering.
Ich habe mal auf die Schnell deine 3 divs positioniert: Hier die CSS-Datei:
#contentContainer {
/* border: 5px solid gray; */
height: 99%;
width: 99%;
min-width: 1200px;
margin: 0px 0px 0px 0px;
}
#content {
height: auto;
width: 60%;
background-color: yellowgreen;
min-width: 50%;
float: left;
margin: 0px 0px 0px 15px;
padding: 10px 5px 5px 15px;
}
#navLeft {
height: 600px;
width: 200px;
border: 1px solid blue;
float: left;
}
#infoRight {
height: 99%;
width: 230px;
/*border: 1px solid blue; */
float: right;
border-left: 1px dashed #031839;
}
In der HTML-Datei solltest du es dann so anordnen:
<div id="contentContainer">
<div id="infoRight"></div>
<div id="navLeft"></div>
<div id="content></div>
</div>
Probier das einfach mal aus. Müsste klappen.
Grüße Tippexs