ComputerBase
Aktuelles

CSS Prozentangabe mit absoluter Angabe (in px) kombinieren

J

j77639

Cadet 4th Year
Registriert
Apr. 2012
Beiträge
85
Guten Tag
ich habe folgendes Problem:
Meine Seite soll ein zweispaltiges Layout haben, wobei die Breite der linken Box bekannt ist (240px). Das Problem ist, das die rechte Box den ganzen Rest des Fensters einnehmen soll (die linke Box ist eine feststehende Navigationsleiste, die rechte ist der Inhalt). Also in CSS ausgedrückt so in der Art: width (von der rechten Box): 100% - 240px;
Das Problem ist halt, dass das logischerweise nicht funktioniert... Jetzt weiß ich keinen Ausweg, gibt es vielleicht eine andere Möglichkeit (wenns geht ohne Javascript, da das länger dauert und manche Leute Javascript gerne ausschalten)? Es soll halt die ganze Breite ausgenutzt werden!
Vielen Dank und schöne Feiertage!
 
Da solltest du mit float arbeiten. Das müsste zum gewünschten Ergebnis führen, habe allerdings schon länger nichts mehr in diese Richtung gemacht.

Wie sieht denn dein Code bisher aus?

Wenn du beiden Container float:left gibst und dem linken Container eine feste breite, sollte das imo eig klappen.

mfg
 
Zuletzt bearbeitet:
Beide mit float:left nach Links und dann den rechten mit padding oder margin auf Abstand bringen.
 
Code: 
<!DOCTYPE html><html>
<head>
    <style type="text/css">
    nav {
        background-color: #888;
        width: 240px;
        position: absolute;
    }
    .content {
        background-color: #444;
        margin-left: 240px;
    }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>Content</li>
            <li>About</li>
        </ul>
    </nav>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nisl nec sapien varius viverra. Suspendisse commodo est et turpis porta facilisis. Pellentesque id libero quam, nec bibendum lacus. Vestibulum dictum interdum venenatis. Fusce mollis leo sit amet quam aliquam tincidunt ut nec orci. Etiam vel enim dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis convallis tortor laoreet gravida. Vestibulum et nisl erat. Etiam ac ipsum mauris, eget dignissim neque.


        Nam sed turpis id nisl aliquet rutrum. Etiam consequat vestibulum placerat. Integer gravida nisi nibh. Aenean convallis dignissim commodo. Integer non cursus leo. Nunc convallis, ante vitae rhoncus bibendum, est leo feugiat tellus, a rutrum libero metus at orci. Quisque ultrices posuere bibendum. Donec eget felis sit amet elit molestie ullamcorper vitae a purus. Cras ac urna turpis, ac bibendum tellus. Phasellus consectetur arcu massa, sit amet rutrum nisi. Suspendisse sollicitudin diam vel quam vehicula dapibus. Donec vitae nulla erat. Sed eleifend imperdiet sem, nec consectetur libero condimentum vitae.


        Etiam sed libero ac nisi aliquet interdum. Sed blandit urna sit amet eros volutpat venenatis. Nullam ultrices massa ac quam cursus dignissim. Quisque sit amet mauris et arcu ultricies dapibus a at odio. Aliquam pellentesque luctus quam, fringilla convallis lacus vehicula nec. Phasellus vulputate imperdiet libero at tempor. Aliquam erat volutpat. Nullam porta justo a ligula egestas at vulputate nibh tristique. Aliquam ut cursus ante. Vivamus sit amet erat gravida augue auctor eleifend. Aliquam rhoncus sollicitudin nunc, at lacinia neque adipiscing vel. Quisque viverra nunc vitae mi volutpat interdum. Maecenas aliquet, turpis eget bibendum egestas, odio purus viverra mi, ut sagittis tellus nunc vitae ipsum. Quisque nec orci sit amet tortor consectetur volutpat a ac ligula. Cras ut posuere augue.


        Cras quis nisi hendrerit erat blandit adipiscing. Etiam tempus mi neque. Nullam vitae porta elit. Morbi id leo in metus dictum porta vitae vitae nibh. Nulla dolor neque, luctus id mollis nec, sagittis quis elit. Praesent urna purus, posuere in pulvinar eget, condimentum vitae neque. Donec augue ligula, ullamcorper et auctor sed, scelerisque eu velit. Donec bibendum adipiscing augue, ut lobortis tortor ornare dictum. Nullam lacus elit, condimentum vitae scelerisque eu, malesuada et massa. Quisque non turpis sed est ultrices rutrum. Ut eu ipsum sit amet augue suscipit aliquet. Sed sit amet dolor eget leo interdum dapibus ac quis lacus. Nulla elementum lorem arcu, eget volutpat lacus.


        Ut cursus pulvinar aliquet. Suspendisse ullamcorper cursus dolor sit amet aliquet. Cras aliquet accumsan ullamcorper. Suspendisse potenti. Ut lobortis eleifend est ac iaculis. Donec at gravida nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit tempus augue, non blandit lorem auctor vitae.
    </div>
</body>
</html>

Würde aber noch zu einer max-width für den content-Bereich raten, denn so breiter Text liest sich schlecht.
 
Ich würde auf absolute Positionierung ersteinmal verzichten. Ist zwar nicht falsch, man sollte es aber immer nur dort anwenden, wo es nicht anders geht. Zumal der TE offenbar noch nicht so tiefgreifende Erfahrungen gesammelt hat. Da ist absolute Positionierung eh nochmal ein heißeres Thema.

Die Lösung von Brom ist schon die gängigste für ein 2-Spaltenlayout.
 
Zuletzt bearbeitet:
Ah - stimmt. Nur mit der Lösung von Brom und mir klappts natürlich nicht, da die 2. Spalte ohne Inhalt natürlich auf 0px Breite zurückfällt. Was es ausmachen kann, wenn man länger damit nicht arbeitet, ist schon bemerkenswert.

Daaron hat hier aber eine wirklich gute Methode aufgezeigt. Natürlich funktioniert auch Tumbleweeds Ansatz.

Was auch gehen würde ist, der linken Spalte float: left und width: 250px, der rechten Spalte KEIN float und kein width und margin-left: 250px zu geben.

Das sollte für 2 Spalten eig reichen, wobei hier die Inhaltsspalte eben an zweiter Stelle im Code stehen muss und genau das ist der Vorteil bei der "Holy Grail"-Methode, da dort der Inhalt eben an erster Stelle stehen kann.
 
Zuletzt bearbeitet:
Mit float: left und die rechte Spalte auf 100% gesetzt entsteht das problem, dass die rechte Spalte genau 240px (also die breite der linken Spalte) zu breit ist, sodass man seitlich scrollen muss, und das wollte ich ja verhindern! Naja, ich danke trotzdem und versuchs erstmal weiter...
 
Zuletzt bearbeitet:
Was auch gehen würde ist, der linken Spalte float: left und width: 250px, der rechten Spalte KEIN float und kein width und margin-left: 250px zu geben.
Zum Vergrößern anklicken....

Probiere das nochmal aus. Das klappt 100%ig und sollte ausreichend sein, außer du bestehst darauf, dass das Inhalts-Div im HTML-Teil an erster Stelle steht. Dann müsstest du auf die "Holy Grail"-Technik zurückgreifen.
Ergänzung ()

Code: 
<!DOCTYPE html><html>
<head>
    <style type="text/css">
    nav {
        background-color: #888;
        width: 240px;
        float: left;
    }
    .content {
        background-color: #444;
        margin-left: 240px;
    }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>Content</li>
            <li>About</li>
        </ul>
    </nav>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nisl nec sapien varius viverra. Suspendisse commodo est et turpis porta facilisis. Pellentesque id libero quam, nec bibendum lacus. Vestibulum dictum interdum venenatis. Fusce mollis leo sit amet quam aliquam tincidunt ut nec orci. Etiam vel enim dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis convallis tortor laoreet gravida. Vestibulum et nisl erat. Etiam ac ipsum mauris, eget dignissim neque.


        Nam sed turpis id nisl aliquet rutrum. Etiam consequat vestibulum placerat. Integer gravida nisi nibh. Aenean convallis dignissim commodo. Integer non cursus leo. Nunc convallis, ante vitae rhoncus bibendum, est leo feugiat tellus, a rutrum libero metus at orci. Quisque ultrices posuere bibendum. Donec eget felis sit amet elit molestie ullamcorper vitae a purus. Cras ac urna turpis, ac bibendum tellus. Phasellus consectetur arcu massa, sit amet rutrum nisi. Suspendisse sollicitudin diam vel quam vehicula dapibus. Donec vitae nulla erat. Sed eleifend imperdiet sem, nec consectetur libero condimentum vitae.


        Etiam sed libero ac nisi aliquet interdum. Sed blandit urna sit amet eros volutpat venenatis. Nullam ultrices massa ac quam cursus dignissim. Quisque sit amet mauris et arcu ultricies dapibus a at odio. Aliquam pellentesque luctus quam, fringilla convallis lacus vehicula nec. Phasellus vulputate imperdiet libero at tempor. Aliquam erat volutpat. Nullam porta justo a ligula egestas at vulputate nibh tristique. Aliquam ut cursus ante. Vivamus sit amet erat gravida augue auctor eleifend. Aliquam rhoncus sollicitudin nunc, at lacinia neque adipiscing vel. Quisque viverra nunc vitae mi volutpat interdum. Maecenas aliquet, turpis eget bibendum egestas, odio purus viverra mi, ut sagittis tellus nunc vitae ipsum. Quisque nec orci sit amet tortor consectetur volutpat a ac ligula. Cras ut posuere augue.


        Cras quis nisi hendrerit erat blandit adipiscing. Etiam tempus mi neque. Nullam vitae porta elit. Morbi id leo in metus dictum porta vitae vitae nibh. Nulla dolor neque, luctus id mollis nec, sagittis quis elit. Praesent urna purus, posuere in pulvinar eget, condimentum vitae neque. Donec augue ligula, ullamcorper et auctor sed, scelerisque eu velit. Donec bibendum adipiscing augue, ut lobortis tortor ornare dictum. Nullam lacus elit, condimentum vitae scelerisque eu, malesuada et massa. Quisque non turpis sed est ultrices rutrum. Ut eu ipsum sit amet augue suscipit aliquet. Sed sit amet dolor eget leo interdum dapibus ac quis lacus. Nulla elementum lorem arcu, eget volutpat lacus.


        Ut cursus pulvinar aliquet. Suspendisse ullamcorper cursus dolor sit amet aliquet. Cras aliquet accumsan ullamcorper. Suspendisse potenti. Ut lobortis eleifend est ac iaculis. Donec at gravida nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit tempus augue, non blandit lorem auctor vitae.
    </div>
</body>
</html>

Habe für dich das Beispiel von Tumbleweed mal umgeschrieben. Damit passt das auch und du kannst auf absolute Positionierung verzichten.

Problem dabei wäre jetzt noch, dass das Menü nicht mitwächst. Dazu kannst du entweder die "Faux Columns"-Technik verwenden, oder ebenfalls wieder auf "Holy Grail" setzen.
 
Ja, es geht. Vielen Dank!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 177 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz