nicht angemeldet
drei Spalten mit CSS
0 0 
Gunnar Bittersmann
0 0
drei Spalten mit CSS
Hallo,
ich habe ein Problem, welches bestimmt schonmal sikutiert wurde. Leider habe ich aber nichts passendes in der suche gefunden.
Ich habe einen Container mit 100% Breite (100% Fensterbreite). In diesem Container befindet sich links eine box mit 225 px und rechts ebenfalls mit 225 px. Jetzt möchte ich in die mitte noch eine Box platieren, die in der Mitte die restliche Breite ausfüllt und von der linken und rechten Box genau 5px abstand hat.
Geht sowas mit CSS?!?
-
Moin!
Geht sowas mit CSS?!?
Um Deine Frage genau und richtig zu beantworten: Ja.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
-
OK...und wie.
Die linke und rechte Box platziere ich mit Float left und float right.
Wenn ich nun der mittleren Box die Breite von 100% gebe, platziert sich diese Box unter den zwei float elementen.
-
Hallo!
OK...und wie.
Die linke und rechte Box platziere ich mit Float left und float right.
Wenn ich nun der mittleren Box die Breite von 100% gebe, platziert sich diese Box unter den zwei float elementen.
So langsam wird's lästig:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltigLiebe Grüße aus Norddeutschland.
--
ie:{ fl:( br:> va:} ls:[ fo:| rl:? n4:~ ss:) de:> js:| ch:? sh:( mo:) zu:)
-
-
-
@@mixmastertobsi:
nuqneH
Leider habe ich aber nichts passendes in der suche gefunden.
Entweder du stellst dich wirklich so blöd an oder du bist wirklich so dreist, uns hier anzulügen.
Nach genau dem, was du als Thema verwendet hast, gesucht … und schon der erste Treffer ist ins Schwarze.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Hallo,
ich habe ein Problem, welches bestimmt schonmal sikutiert wurde. Leider habe ich aber nichts passendes in der suche gefunden.
Ich habe einen Container mit 100% Breite (100% Fensterbreite). In diesem Container befindet sich links eine box mit 225 px und rechts ebenfalls mit 225 px. Jetzt möchte ich in die mitte noch eine Box platieren, die in der Mitte die restliche Breite ausfüllt und von der linken und rechten Box genau 5px abstand hat.
Geht sowas mit CSS?!?
-
Vergiss die Box in der Mitte du hast bereit einen umfassenden Container, der das aufnehmen kann:
<!DOCTYPE html> <html> <head> <title>Drei Spalten mit allumfassendem Container</title> <style type="text/css"> #container100 { width:100%; /* Ich habe einen Container mit 100% Breite (100% Fensterbreite). */ background-color:#FBB; } #box_links { width:225px; /* links eine box mit 225 px */ background-color:#BFB; float:left; margin-right:5px; /*von der linken und rechten Box genau 5px abstand hat. */ } #box_rechts { width:225px; /* und rechts ebenfalls mit 225 px. */ background-color:#BBF; float:right; margin-left:5px; /*von der linken und rechten Box genau 5px abstand hat. */ } </style> </head> <body> <div id="container100"> <div id="box_links">Quisque ac quam ac orci sollicitudin tincidunt. Nam bibendum urna ut neque blandit convallis. Sed nec dolor libero, et commodo leo. Cras suscipit leo mi. Maecenas pharetra sollicitudin vestibulum. Ut cursus congue orci nec condimentum. </div> <div id="box_rechts">Etiam vitae eros euismod metus pellentesque elementum. Praesent vitae tellus lorem, ac vestibulum erat. Vestibulum eget erat et metus congue eleifend sit amet sit amet mauris. Donec arcu leo, vehicula quis fermentum sed, feugiat vitae tellus. </div> Jetzt möchte ich in die mitte noch eine Box platieren, die in der Mitte die restliche Breite ausfüllt Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. </div> </body> </html>--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(-
@@Deus Figendi:
nuqneH
Vergiss die Box in der Mitte du hast bereit einen umfassenden Container, der das aufnehmen kann:
Du hast nichts dagegen getan, dass der Inhalt (wenn viel) nicht unter linke und rechte Box floatet. Es muss aber keine Box sein, margin-left und margin-right sollten es auch tun.
Aber vergiss die Box @id="container100", du hast bereits zwei umfassende Container, die das aufnehmen können.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Deus Figendi:
nuqneH
Vergiss die Box in der Mitte du hast bereit einen umfassenden Container, der das aufnehmen kann:
Du hast nichts dagegen getan, dass der Inhalt (wenn viel) nicht unter linke und rechte Box floatet. Es muss aber keine Box sein, margin-left und margin-right sollten es auch tun.
Öhm hab ich beim Test wohl bemerkt, aber in Kauf genommen, wäre bei einer vierte Box *sigh* aber das Verhalten, insofern wohl gewünscht, hast recht.
Aber vergiss die Box @id="container100", du hast bereits zwei umfassende Container, die das aufnehmen können.
Schon, aber ich habe einfach nur mixmastertobsis Ansage berücksichtigt, die nunmal besagte, dass dieser Container existiert (das steht doch auch als Kommentar im CSS!)
Darüber hinaus war ich eigentlich der Ansicht, dass <body> nur block-Elemente aufnehmen kann... ich suche gerade die Elementrefferenz dazu, aber manchmal ist das self auch erm unbequem. Ach da ist es ja... <http://de.selfhtml.org/html/referenz/elemente.htm#body@title=kommt wohl auf den Dokumententyp an>. Ich habe jetzt HTML5 angegeben, kann aber auf die Schnelle nicht feststellen, wie es da ist.Kurzum: Ich hab durchaus darüber nachgedacht was ich da verzapfe.
--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(-
@@Deus Figendi:
nuqneH
Darüber hinaus war ich eigentlich der Ansicht, dass <body> nur block-Elemente aufnehmen kann […] <http://de.selfhtml.org/html/referenz/elemente.htm#body@title=kommt wohl auf den Dokumententyp an>.
So isses. Aber es spricht ja nichts dagegen, Textinhalte nicht einfach so hinzurotzen, sondern in 'p'-Elemente zu stecken.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-