Zum Inhalt springen

Div nebeneinader und in gleicher Höhe

KlausInge
 Teilen

Empfohlene Beiträge

KlausInge

KlausInge

Geschrieben
Geschrieben

Hallo,

habe ein CSS Layout mit 3 Spalten. Leider steht die mittlere unter den beiden anderen. Wie schaffe ich es dass die 3 Spalten nebeneinader stehen und immer die selbe höhe haben?

Klaus


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="de">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>

<style type="text/css">


#container { 


	border:1px solid red;


	background-color: #FFFFFF;

	width: 940px;


}

#links { 


float:left; 

width:265px; 


padding:1em; 


	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;


	border-top:1px solid #cfccc5;

	border-bottom:1px solid #cfccc5;

	border-right:1px solid #cfccc5;

	border-left:1px solid #cfccc5;



	border:1px solid blue;


}



#mitte { 

	padding:1em 1em 0 1em; 

	margin-left:320px; 


	width: 265px;


	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;


	border-top:1px solid #cfccc5;

	border-bottom:1px solid #cfccc5;

	border-right:1px solid #cfccc5;

	border-left:1px solid #cfccc5;


	border:1px solid yellow;



}


#rechts { 

	padding:1em 1em 0 1em; 

	margin-left:640px; 


	width: 265px;


	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;


	border-top:1px solid #cfccc5;

	border-bottom:1px solid #cfccc5;

	border-right:1px solid #cfccc5;

	border-left:1px solid #cfccc5;


	border:1px solid green;


}









#mitte:after { content:"clear"; clear:left; display:block; height:0; overflow:hidden; visibility:hidden; }

#rechts:after { content:"clear"; clear:left; display:block; height:0; overflow:hidden; visibility:hidden; }

p { margin:0 0 0.5em 0; }



</style>


</head>

<body>




<div id="container">



	<div id="links">

		<h1>Links</h1>

		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Ut pretium. Vestibulum viverra. Phasellus aliquet, mi at fringilla mollis, tellus diam bibendum arcu, sed porta ligula orci eget turpis. Etiam orci est, posuere non, tincidunt sit amet, semper sit amet, nisi. Nam tincidunt leo ac risus hendrerit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. Donec vel erat. Nullam porta, sapien vitae pellentesque tristique, nisi tellus congue felis, in aliquam mauris erat et neque.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Ut pretium. Vestibulum viverra. Phasellus aliquet, mi at fringilla mollis, tellus diam bibendum arcu, sed porta ligula orci eget turpis. Etiam orci est, posuere non, tincidunt sit amet, semper sit amet, nisi. Nam tincidunt leo ac risus hendrerit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. Donec vel erat. Nullam porta, sapien vitae pellentesque tristique, nisi tellus congue felis, in aliquam mauris erat et neque.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Ut pretium. Vestibulum viverra. Phasellus aliquet, mi at fringilla mollis, tellus diam bibendum arcu, sed porta ligula orci eget turpis. Etiam orci est, posuere non, tincidunt sit amet, semper sit amet, nisi. Nam tincidunt leo ac risus hendrerit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. Donec vel erat. Nullam porta, sapien vitae pellentesque tristique, nisi tellus congue felis, in aliquam mauris erat et neque.</p>


	</div>



	<div id="rechts">


		<h1>Rechts</h1>

		<p>Integer a justo. Aenean at velit. Sed at odio. Fusce felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sed nisi vel odio rhoncus feugiat. Ut libero leo, auctor eget, mattis sit amet, dapibus et, orci. Quisque rutrum dui et purus. Fusce porttitor sagittis mauris. Proin iaculis felis eget pede. Nunc vitae purus. Duis mi pede, rutrum eu, semper sed, ultricies nonummy, pede. Vestibulum molestie diam sit amet velit. Suspendisse elementum, nulla et dignissim malesuada, sapien lorem gravida orci, quis ullamcorper sem metus eget felis. Praesent tincidunt turpis et metus. Fusce ac tellus. Curabitur dui urna, euismod et, ornare et, nonummy et, ante. Vivamus sed pede. Sed lacus. Etiam suscipit urna in mi.</p>


	</div>



	<div id="mitte">

		<h1>Mitte</h1>

		<p>Integer a justo. Aenean at velit. Sed at odio. Fusce felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sed nisi vel odio rhoncus feugiat. Ut libero leo, auctor eget, mattis sit amet, dapibus et, orci. Quisque rutrum dui et purus. Fusce porttitor sagittis mauris. Proin iaculis felis eget pede. Nunc vitae purus. Duis mi pede, rutrum eu, semper sed, ultricies nonummy, pede. Vestibulum molestie diam sit amet velit. Suspendisse elementum, nulla et dignissim malesuada, sapien lorem gravida orci, quis ullamcorper sem metus eget felis. Praesent tincidunt turpis et metus. Fusce ac tellus. Curabitur dui urna, euismod et, ornare et, nonummy et, ante. Vivamus sed pede. Sed lacus. Etiam suscipit urna in mi.</p>


	</div>







</div>


</body>

</html>

Snipes83

Snipes83

Geschrieben
Geschrieben

Hi Hi,

also:

Erster Punkt:

Stell die Divs in richtiger Reihenfolge. Nicht Links, rechts, mitte.

Sonder Links, Mitte, Rechts.

Zweiter Punkt:

entferne die Margin-left aus mitte und rechts (bzw. verkleiner sie auf jeweils 15px - dann hast nen Abstand zwischen den divs).

Dritter Punkt: füge ein position:relative; und ein float:left; bei beiden ein.

So jetzt stehen deine Divs alle nebeneinander.

Gruß

Snipes83

KlausInge

KlausInge

Geschrieben
  • Autor
Geschrieben

Hi, danke für die Hinweise. Dies klappt alles.

Jedoch sollen alle 3 Spalten die gleiche Länge haben, unabhängig vom Inhalt und mit mehr Inhalt auch mitwachsen.

Hat da jemand einen Hinweis noch für mich?

Klaus

Snipes83

Snipes83

Geschrieben
Geschrieben (bearbeitet)

Puh das Problem hatte ich auch schonmal.

Ich weiß nicht mehr den genauen Lösungsweg, aber vom Prinzip her

war es ein CSS-hack der ein -32768px margin-bottom mit einem 32768px padding-bottom nützte, wenn mich nicht alles täuscht. Kann leider erst morgen nach der Seite und meiner Lösung schauen. Falls bis dahin keiner ne andere Lösung hat, meld ich mich nochmal!

Edit: Ach wie toll ist Google :-)

hier war meine Lösung

Bearbeitet von Snipes83
Snipes83

Snipes83

Geschrieben
Geschrieben

Hattest Glück das mir langweilig war :-)

Hier der fertige Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="de">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>

<style type="text/css">


#container { 


	border:1px solid red;


	background-color: #FFFFFF;

	width: 940px;

	overflow:hidden;


}

#links { 


float:left; 

width:265px; 


padding:1em; 


	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;


	border-top:1px solid #cfccc5;

	border-bottom:1px solid #cfccc5;

	border-right:1px solid #cfccc5;

	border-left:1px solid #cfccc5;

	padding-bottom:32678px;

	margin-bottom:-32678px;


	border:1px solid blue;


}



#mitte { 

	padding:1em 1em 0 1em; 

	position:relative;

	float:left;

	margin-left:15px;

	padding-bottom:32678px;

	margin-bottom:-32678px;	

	width: 265px;


	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;


	border-top:1px solid #cfccc5;

	border-bottom:1px solid #cfccc5;

	border-right:1px solid #cfccc5;

	border-left:1px solid #cfccc5;


	border:1px solid yellow;



}


#rechts { 

	padding:1em 1em 0 1em; 

	position:relative;

	float:left;

	margin-left:15px;


	width: 265px;

	padding-bottom:32678px;

	margin-bottom:-32678px;

	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;


	border-top:1px solid #cfccc5;

	border-bottom:1px solid #cfccc5;

	border-right:1px solid #cfccc5;

	border-left:1px solid #cfccc5;


	border:1px solid green;


}









#mitte:after { content:"clear"; clear:left; display:block; height:0; overflow:hidden; visibility:hidden; }

#rechts:after { content:"clear"; clear:left; display:block; height:0; overflow:hidden; visibility:hidden; }

p { margin:0 0 0.5em 0; }



</style>


</head>

<body>




<div id="container">



	<div id="links">

		<h1>Links</h1>

		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Ut pretium. Vestibulum viverra. Phasellus aliquet, mi at fringilla mollis, tellus diam bibendum arcu, sed porta ligula orci eget turpis. Etiam orci est, posuere non, tincidunt sit amet, semper sit amet, nisi. Nam tincidunt leo ac risus hendrerit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. Donec vel erat. Nullam porta, sapien vitae pellentesque tristique, nisi tellus congue felis, in aliquam mauris erat et neque.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Ut pretium. Vestibulum viverra. Phasellus aliquet, mi at fringilla mollis, tellus diam bibendum arcu, sed porta ligula orci eget turpis. Etiam orci est, posuere non, tincidunt sit amet, semper sit amet, nisi. Nam tincidunt leo ac risus hendrerit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. Donec vel erat. Nullam porta, sapien vitae pellentesque tristique, nisi tellus congue felis, in aliquam mauris erat et neque.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Ut pretium. Vestibulum viverra. Phasellus aliquet, mi at fringilla mollis, tellus diam bibendum arcu, sed porta ligula orci eget turpis. Etiam orci est, posuere non, tincidunt sit amet, semper sit amet, nisi. Nam tincidunt leo ac risus hendrerit ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. Donec vel erat. Nullam porta, sapien vitae pellentesque tristique, nisi tellus congue felis, in aliquam mauris erat et neque.</p>


	</div>


	<div id="mitte">

		<h1>Mitte</h1>

		<p>Integer a justo. Aenean at velit. Sed at odio. Fusce felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sed nisi vel odio rhoncus feugiat. Ut libero leo, auctor eget, mattis sit amet, dapibus et, orci. Quisque rutrum dui et purus. Fusce porttitor sagittis mauris. Proin iaculis felis eget pede. Nunc vitae purus. Duis mi pede, rutrum eu, semper sed, ultricies nonummy, pede. Vestibulum molestie diam sit amet velit. Suspendisse elementum, nulla et dignissim malesuada, sapien lorem gravida orci, quis ullamcorper sem metus eget felis. Praesent tincidunt turpis et metus. Fusce ac tellus. Curabitur dui urna, euismod et, ornare et, nonummy et, ante. Vivamus sed pede. Sed lacus. Etiam suscipit urna in mi.</p>


	</div>



	<div id="rechts">


		<h1>Rechts</h1>

		<p>Integer a justo. Aenean at velit. Sed at odio. Fusce felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sed nisi vel odio rhoncus feugiat. Ut libero leo, auctor eget, mattis sit amet, dapibus et, orci. Quisque rutrum dui et purus. Fusce porttitor sagittis mauris. Proin iaculis felis eget pede. Nunc vitae purus. Duis mi pede, rutrum eu, semper sed, ultricies nonummy, pede. Vestibulum molestie diam sit amet velit. Suspendisse elementum, nulla et dignissim malesuada, sapien lorem gravida orci, quis ullamcorper sem metus eget felis. Praesent tincidunt turpis et metus. Fusce ac tellus. Curabitur dui urna, euismod et, ornare et, nonummy et, ante. Vivamus sed pede. Sed lacus. Etiam suscipit urna in mi.</p>


	</div>


</div>


</body>

</html>

Hoffe es ist so, wie du es dir vorgestellt hast!

Lieber Gruß

Snipes83

Null

Null

Geschrieben
Geschrieben

Gewöhnt euch das -left -right -top -bottom bitte ganz schnell wieder ab! Verbraucht nur Traffic und Speicherplatz (Auch wenn es gering ist ... bei paar hundert Tausend Views am Tag macht das auch etwas aus ;)).

Vorallem ist im obigen CSS Code einiges doppelt deklariert. Erst 4x Border mit Hex-Farbcode und danach noch einmal mit der Definition "green"?

KlausInge

KlausInge

Geschrieben
  • Autor
Geschrieben

Hallo, hatte ich bereits geändert in die einfache Schreibweise. Abert trotzdem danke für den Hinweis.

Zu meinem aktuellen Problem. Habe das jetzt umgesetzt und es klappt auch super. Nur fehlt der untere Rand komplett. HAbe da schon einige Sachen Probiert, wie einen zweiten Div noch reinsetzen,. Das klappt zwar beim ersten aber die zweite Spalte macht da Probleme. Kann mir da noch jemand ein paar Tipps geben?

Klaus


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2 Spalten Layout - Vorlage</title>

<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />


</head>

<body>




<div id="container">



	<div id="eins">


		<h1>Eins</h1>

		<p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

		<p> Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>

		<p> Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

		<p> Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>

		<p> Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>

		<p> Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben.</p>

		<p> Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>

		<p> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</p>

		<p> Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>

		<p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

		<p> Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>

		<p> Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

		<p> Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>

		<p> Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>

		<p> Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben.</p>

		<p> Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>

		<p> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</p>

		<p> Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>



	</div>




	<div id="zwei">

		<h1>Zwei</h1>

		<p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

		<p> Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>

		<p> Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

		<p> Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>

		<p> Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>

		<p> Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben.</p>

		<p> Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>

		<p> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</p>

		<p> Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>

		<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â€â€œ ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel </p>



	</div>


</div>


</body>

</html>
Und hier die entsprechende css Datei 

@CHARSET "UTF-8";


#container { 

	background-color: #FFFFFF;

	width: 940px;

	overflow:hidden;

}

#eins { 

	float: left; 

	width: 618px; 

	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;

	border:1px solid red;

	padding-bottom:32678px;

	margin-bottom:-32678px;

}


#zwei { 

	position:relative;

	float:left;

	margin-left:20px;

	width: 298px;

	padding-bottom:32678px;

	margin-bottom:-32678px;

	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;

	border:1px solid red;

}

KlausInge

KlausInge

Geschrieben
  • Autor
Geschrieben
Dann setz doch einfach in deinem Container nen border-bottom:1px solid red rein. Der beinhaltet ja beide divs und endet dort ja auch.

Gruß Snipes83

Das hatte ich bereits. jedoch sollen die beiden boxen ja unabhängig stehen und durch den border im container geht der border ja durchgängig, ohne unterbrechnung beim ende der boxen.

klaus

Snipes83

Snipes83

Geschrieben
Geschrieben

So?


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2 Spalten Layout - Vorlage</title>

<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />


</head>

<body>




<div id="container">



	<div id="eins">

	   <div id="border1">


		<h1>Eins</h1>

		<p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

		<p> Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>

		<p> Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

		<p> Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>

		<p> Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>

		<p> Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>

		<p> Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>

		<p> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</p>

		<p> Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>

		<p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

		<p> Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>

		<p> Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

		<p> Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>

		<p> Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>

		<p> Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>

		<p> Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>

		<p> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</p>

		<p> Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>


	    </div>

	</div>




	<div id="zwei">

	   <div id="border2">	

		<h1>Zwei</h1>

		<p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

		<p> Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.</p>

		<p> Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>

		<p> Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>

		<p> Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>

		<p> Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>

		<p> Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>

		<p> Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.</p>

		<p> Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>

		<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel </p>


		</div>

	</div>


</div>


</body>

</html>
Und CSS: 

@CHARSET "UTF-8";


#container { 

	background-color: #FFFFFF;

	width: 940px;

	overflow:hidden;

}

#eins { 

	float: left; 

	width: 618px; 

	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;

	padding-bottom:32678px;

	margin-bottom:-32678px;

}


#zwei { 

	position:relative;

	float:left;

	margin-left:20px;

	width: 298px;

	padding-bottom:32678px;

	margin-bottom:-32678px;

	background-image:url('img/layout/bg_contentbox.jpg'); 

	background-repeat: repeat-x;

	background-color: #e6e6e1;

}


#border1 {

	position:relative;

	float:left;

	border:1px solid red;

}	


#border2 {

	position:relative;

	float:left;

	border:1px solid red;

}

MFG Snipes83

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...