dennisstuggi
Dec 22, 2010
view8997
view6
0
Goto Top

Pixel und Prozent in DIV-Layout kombinieren

GermansolvedQuestionCSSDevelopment
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.

d41952add603cdf140071d0bfe9da95a

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);
}
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 157412

Url: https://administrator.de/contentid/157412

Printed on: April 26, 2024 at 13:04 o'clock

6 Comments
Latest comment
Goto Top
Member: KennyNet
KennyNet Dec 22, 2010 at 11:02:35 (UTC)
Goto Top
Hallo DennisBauer,

schon mal probiert das einfach per width:auto umzusetzen ?
Oder falls eine gewisse Mindestbreite des Content eingehalten werden soll per min-width: ... px ?


Gruß...
Member: DennisStuggi
DennisStuggi Dec 22, 2010 at 11:57:21 (UTC)
Goto Top
Hi KennyNet,

width:auto hat den gleichen Effekt, wie wenn ich es ganz weglasse:
Der Content nimmt nur die Breite ein, die von text usw. benötigt wird.

min-width ist eigentlich eher eine Notlösung, da ich es so flexibel wie möglich gestalten will.
Member: LennyLinux
LennyLinux Dec 23, 2010 at 14:05:13 (UTC)
Goto Top
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:

#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
Member: DennisStuggi
DennisStuggi Dec 23, 2010 at 14:34:41 (UTC)
Goto Top
Danke für deine Hilfe.
Das funktioniert aber auch nicht (so hatte ich es bereits)
Ist die Auflösung gering (z.B. Netbook), wird der rechte Container unterhalb des Inhalts dargestellt.
Member: LennyLinux
LennyLinux Dec 25, 2010 at 09:52:12 (UTC)
Goto Top
Mit was für einem Browser hast du es getestet??

Versuch mal folgende Zeile einzubauen. Bei mir funktioniert das Layout, wie du es möchtest ohne Probleme

<meta http-equiv="X-UA-Compatible" content="IE=7" />
Member: DennisStuggi
DennisStuggi Dec 25, 2010 at 16:01:02 (UTC)
Goto Top
Internet Explorer 8 und Firefox 3.6

Werde es jetzt vorerst so machen, dass ich nur ein min-width beim content einfüge.
Und zwar so breit, dass die Webseite auf Netbooks richtig dargestellt wird.

Bei größeren Auflösungen füllt dann das content div halt nicht die gesamte Breite aus, sondern nur so viel, wie vom Text benötigt wird.


Wenn jemand noch Vorschläge hat, wie ich das besser lösen kann, immer her damit.
GermansolvedQuestionCSSDevelopment