✔ clear: both macht einen riesen Abstand, aber nicht immer

soezkan · 22. Juni 2009

Hallo zusammen,

ich habe ein Layout, welches jeweils zwei DIVs nebeneinander anzeigt. Diese DIVs haben jeweils eine Klasse liegen in einem Container mit ID.

HTML:

div#ContentBox {
	margin: 0 0px 0 165px;
	padding: 30px 20px 30px 20px;
	font-family: Georgia;
	font-size: 14px;
	color: #1C3369;
	width: 620px;
	min-height: 100%;
	height: 100%;
	text-align: left;
	vertical-align: top;
}
* html div#ContentBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -14px;
	padding: 30px 0px 0px 0px;
}

div#ContentBox p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

div#ContentBox h3 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 16px;
	color: #1C3369;
	text-align: center;
}

div#ContentBox a {
	font-family: Georgia, Times New Roman;
	text-decoration: underline; 
	color: #1D3367;
}
div#ContentBox a:hover {
	text-decoration: none;
	color: #1D3367;
}
div#ContentBox a:active {
	text-decoration: none; 
	color: #1D3367;
}

div#ContentBox .ContentColumn {
	margin: 15px 0px 0px 0px;
	padding: 10px 10px 10px 0px;
	width: 190px;
	text-align: justify;
	vertical-align: top;
	float: left;

}

div#ContentBox .ContentColumn h4 {
	margin: 0px 0px 2px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumn p {
	margin: 0px 0px 17px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumnLeft {
	margin: 0 0 0 0px;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: left;

}
div#ContentBox .ContentColumnLeft h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}
div#ContentBox .ContentColumnLeft p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}


div#ContentBox .ContentColumnRight {
	margin: 0 -1px 0 0;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: right;

}
div#ContentBox .ContentColumnRight h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}
div#ContentBox .ContentColumnRight p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .DivideContent {
	clear: both;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

Wenn ich jetzt sowas habe wie zum Beispiel:

HTML:

<div id="ContentBox">
	<h3>Überschrift</h3>

	<div class="ContentColumnLeft">Text 1</div>
	<div class="ContentColumnRight">Text 2</div>
        xxxxxxxxxxxxxxxxxxxxxxx
	<div class="DivideContent">&nbsp;</div>

	<div class="ContentColumnLeft">Text3</div>
	<div class="ContentColumnRight">Text 4</div>

	<div class="DivideContent">&nbsp;</div>

	<div class="ContentColumn">Spalte 1</div>
	<div class="ContentColumn">Spalte 2</div>
	<div class="ContentColumn">Spalte 3</div>

	<div class="DivideContent">&nbsp;</div>

	...
	usw.

</div>

... dann macht der Browser (egal welcher, sieht bei allen gleich doof aus) mir an der mit xxxxxxxxxxxxxxxx markierten Stelle einen riesigen Abstand von mindestens 200px.

Das ist mir ein Rätsel, denn an den anderen Stellen, ist es lediglich ein Absatz, also völlig normal.

Wie kann das sein? Kann mir da bitte jemand helfen?

1000 Dank schon jetzt.

Viele Grüße,
Soezkan

Maik · 22. Juni 2009

soezkan hat gesagt.:
... dann macht der Browser (egal welcher, sieht bei allen gleich doof aus) mir an der mit xxxxxxxxxxxxxxxx markierten Stelle einen riesigen Abstand von mindestens 200px.

Kann ich nicht bestätigen:

Kann man sich das Ganze zur Gegenkontrolle irgendwo live anschauen?

mfg Maik

soezkan · 22. Juni 2009

Nein leider nicht. Der gesamte HTML-Source ist allerdings noch etwas umfangreicher.
Also, mein Design sieht so aus:

Zentriert
Drei DIV-Spalten (LINKS, CONTENT, RECHTS).
In der Mittleren Spalte steht der Content, den ich hier angegeben habe.
Jetzt fällt mir auf, dass der Code mit dem rechten DIV (RECHTS) das clear
abschliesst, da 800 Pixel hoch - so kommt der Abstand zu stande.

Jetzt frage ich mich, wie ich das DIV, welches das clear: both enthält
dazu bringe die Spalte RECHTS nicht mit zu berücksichtigen.

Vielen Dank für nochn Tipp

Soezkan

Maik · 22. Juni 2009

soezkan hat gesagt.:
Nein leider nicht. Der gesamte HTML-Source ist allerdings noch etwas umfangreicher.

Dann pack mal alles in eine ZIP-Datei und lad diese hier hoch, damit man zunächst mal einen Gesamtüberblick von der Seite gewinnen kann.

mfg Maik

soezkan · 22. Juni 2009

Habe hier ne "abgespeckte Version" die den Fehler schön zeigt:

HTML:

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

<meta name="description" content="test">
<title>Meine Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="meineseite.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Stil1 {
	color: #FF0000;
	font-weight: bold;
}
-->
</style>
</head>
<body bgcolor="#ffffff">
	
<div id="centerboxmain">
	<div id="LeftColumn">
	<p>&nbsp;</p>
	<p><script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxxxxxxxx";
/* Top Left Ad 120x240, Erstellt 19.06.09 */
google_ad_slot = "3418180187";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript" src="index.php-Dateien/show_ads.js">
</script><script src="index.php-Dateien/expansion_embed.js"></script><script src="index.php-Dateien/test_domain.js"></script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 240px; position: relative; visibility: visible; width: 120px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 240px; position: relative; visibility: visible; width: 120px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" src="index.php-Dateien/ads.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="120" frameborder="0" height="240"></iframe></ins></ins></p>
	<p>&nbsp;</p>
	</div>
	<div id="RightColumn">
	<p>&nbsp;</p>
	<p></p>
	<p><script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxxxxxxxx";
/* Top Rght Ad LARGE120x600, Erstellt 19.06.09 */
google_ad_slot = "0784314028";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript" src="index.php-Dateien/show_ads.js">
</script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 600px; position: relative; visibility: visible; width: 120px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 600px; position: relative; visibility: visible; width: 120px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame2" marginheight="0" marginwidth="0" name="google_ads_frame" src="index.php-Dateien/ads_002.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="120" frameborder="0" height="600"></iframe></ins></ins></p>
	</div>
	<div id="CenterColumn">
        <div id="HeaderBox"> Nulla facilisi. Nulla aliquam, turpis non auctor varius, turpis diam lacinia elit, ac lobortis nibh orci at augue. Quisque eu leo ut felis rhoncus posuere. Aenean nibh lacus; bibendum at bibendum in, dapibus non ligula. <br>
          <br>
		<p class="celebrity">&nbsp;</p>
      </div>
        <div id="NavigationBox">
            <div id="MainNavigation">
 				<h6><a href="index.php?site=startseite">Startseite</a></h6>
				<h6><a href="index.php?site=algorithm">Algorithmen</a></h6>
				<h6><a href="index.php?site=correspondence">Korrespondenzen</a></h6>
				<h6><a href="index.php?site=kunst">Art Gallery</a></h6>
				<h6><a href="index.php?site=videos">Videos</a></h6>
		  </div>
            <div id="SubNavigation">
				<h6><a href="index.php?site=aboutme">Über mich</a></h6>
 				<h6><a href="#">Forum</a></h6>
				<h6><a href="index.php?site=newsletter">Newsletter</a></h6>
				<h6><a href="index.php?site=glossar">Glossar</a></h6>
				<h6><a href="index.php?site=disclaimer">Disclaimer</a></h6>
				<h6><a href="index.php?site=literatur">Quellen</a></h6>
		  </div>
        </div>
        <div id="ContentBox">
		  <div style="clear: none; display: block;">
			<a name="details"></a>
			<h3>&Uuml;berschrift</h3>
							<p><br></p>
			<div class="ContentColumnLeft">Suspendisse potenti. Nullam vestibulum, nunc non dictum elementum, orci est viverra velit, ut mollis lectus augue a enim. Quisque in dui metus; vel fringilla erat. Proin vitae massa ipsum.<span class="ContentColumnRight"> enim sem; lobortis sed ultricies eget, viverra ac justo. Sed semper ante nec diam ornare at consectetur nunc rhoncus. </span></div>
				<div class="ContentColumnRight">Ut sagittis convallis libero, convallis luctus lorem varius sed. Etiam eu dignissim augue. Vivamus condimentum turpis sed lectus congue rhoncus. Nam elementum ligula pulvinar sem aliquam rhoncus.</div>
							<div class="DivideContent">&nbsp;</div>
			<div class="ContentColumnLeft"><span class="Stil1">Etiam commodo erat vitae neque porta laoreet</span>. Vivamus velit lorem, suscipit id iaculis eget, posuere ac elit. Aenean pellentesque lacinia lacinia? Etiam ornare, risus non pellentesque imperdiet, risus orci dapibus nunc, et vehicula dui tellus non sem. Suspendisse a ligula non nibh mollis luctus at quis risus. In lectus quam, fermentum vitae dictum non, laoreet in nisi.				  </div>
			<div class="ContentColumnRight">
			<p align="center"><span class="ContentColumnLeft">Etiam commodo erat vitae neque porta laoreet. Vivamus velit lorem, suscipit id iaculis eget, posuere ac elit. Aenean pellentesque lacinia lacinia? Etiam ornare, risus non pellentesque imperdiet, risus orci dapibus nunc, et vehicula dui tellus non sem. Suspendisse a ligula non nibh mollis luctus at quis risus. In lectus quam, fermentum vitae dictum non, laoreet in nisi.</span></p>
				</div>
			<div class="DivideContent">&nbsp;</div>
			<div class="ContentColumn">			  Proin ligula nisl, adipiscing ac tristique sed, sagittis ut dolor. Curabitur ut arcu in lectus bibendum tincidunt eget in diam. Mauris molestie, tellus consequat sollicitudin ornare, nunc nisi ornare mauris; sed feugiat nibh risus et nisl. Mauris congue laoreet placerat! Donec ut lectus neque. Vestibulum malesuada fringilla ullamcorper. Nunc id risus sapien, lobortis porta lorem. Donec lectus nisi, ullamcorper vel pretium non; mattis eget diam. Sed suscipit mollis nulla in faucibus. Suspendisse sed metus mauris. Mauris est ipsum, mattis quis rhoncus vel, laoreet tincidunt arcu.</div>
			<div class="ContentColumn">			 Proin ligula nisl, adipiscing ac tristique sed, sagittis ut dolor. Curabitur ut arcu in lectus bibendum tincidunt eget in diam. Mauris molestie, tellus consequat sollicitudin ornare, nunc nisi ornare mauris; sed feugiat nibh risus et nisl. Mauris congue laoreet placerat! Donec ut lectus neque. Vestibulum malesuada fringilla ullamcorper. Nunc id risus sapien, lobortis porta lorem. Donec lectus nisi, ullamcorper vel pretium non; mattis eget diam. Sed suscipit mollis nulla in faucibus. Suspendisse sed metus mauris. Mauris est ipsum, mattis quis rhoncus vel, laoreet tincidunt arcu.</div>
							<div class="ContentColumn">							  Proin ligula nisl, adipiscing ac tristique sed, sagittis ut dolor. Curabitur ut arcu in lectus bibendum tincidunt eget in diam. Mauris molestie, tellus consequat sollicitudin ornare, nunc nisi ornare mauris; sed feugiat nibh risus et nisl. Mauris congue laoreet placerat! Donec ut lectus neque. Vestibulum malesuada fringilla ullamcorper. Nunc id risus sapien, lobortis porta lorem. Donec lectus nisi, ullamcorper vel pretium non; mattis eget diam. Sed suscipit mollis nulla in faucibus. Suspendisse sed metus mauris. Mauris est ipsum, mattis quis rhoncus vel, laoreet tincidunt arcu.</div>
							<div class="DivideContent">&nbsp;</div>
		  </div>	
        </div>
	</div>
</div>
</body></html>

und dieses CSS benutze ich

HTML:

body {
	background:  url(images/background_rect.png) repeat-y 50% 0;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Georgia;
	background-color: #ffffff;
	text-align: center;
}

#centerboxmain {
	width: 1024px; 
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	text-align:left; 
	/* part 2 of 2 centering hack */
	width: 1024px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 994px;
	min-height: 100%;
	height: 100%;
/*border: 1px dotted green;*/
}

html>body #centerboxmain {
	width: 994px; /* ie5win fudge ends */
	min-height: 100%;
	height: 100%;
}



/********************/
/** LEFT COLUMN *****/
/********************/

div#LeftColumn {
	font-family: Georgia;
	font-size: 15px;
	float: left; 
	width: 140px;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 100%;
	height: 100%;
	text-align: center;
/*border: 1px dotted green;*/
}
div#LeftColumn p {
	font-family: Arial;
	font-size: 12px;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 20px 0px;
}
div#LeftColumn ul {
	margin: 0px 0 15px 15px; 
	padding: 0 0 0 0;
}
div#LeftColumn li {
	font-family: Georgia;
	font-size: 15px;
	list-style: none;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
}

div#LeftColumn a {
	font-family: Georgia;
	font-size: 15px;
	display: block;
	text-decoration: none;
}
div#LeftColumn a:link {
	color: #666666
}
div#LeftColumn a:visited {
	color: #666666; 
}
div#LeftColumn a:hover {
	color: #000000; 
}
div#LeftColumn a:active {
	color: #666666 
}
div#LeftColumn a.subnavi {
	font-family: Georgia;
	font-size: 12px;
	list-style: none;
	margin: 0px 0px 0px -5px; 
	padding: 3px 0px 3px 0px;
}



/********************/
/** RIGHT COLUMN ****/
/********************/

div#RightColumn {
	font-family: Arial;
	float: right; 
	clear: none;
	width: 128px;
	color: #ffffff;
	margin: 17px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	text-align: left;
/*border: 1px dotted green;*/
}

div#RightColumn h2 {
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

div#RightColumn h3 {
	font-size: 14px;
	font-weight: normal;
	margin: 0px 0px 0px 0px ;
	padding: 0px 0px 7px 0px ;
}

div#RightColumn p {
	font-size: 14px;
	color: #EAE4D6;
	margin: 7px 0px 15px 0px ;
	padding: 7px 0px 0px 0px ;
}

div#RightColumn a {
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #FB8360;
}
div#RightColumn a:link {
	color: #FB8360
}
div#RightColumn a:visited {
	color: #FB8360; 
}
div#RightColumn a:hover {
	color: #FB8360; 
	text-decoration: underline;
}
div#RightColumn a:active {
	color: #FB8360 
}



/********************/
/** CENTER COLUMN ***/
/********************/

div#CenterColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
/*border: 1px dotted green;*/
}
* html div#CenterColumn {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}

/* HEADER BOX */

div#HeaderBox {
	margin: 0px 0px -5px 208px;
	padding: 20px 0px 0px 0px;
	font-family: Georgia;
	font-size: 12px;
	font-style: italic;
	text-align: left;
	color: #715E37;
	min-height: 78px;
	height: 78px;
	width: 580px;
}
* html div#HeaderBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -10px;
	padding: 0px 0px 0px 0px;
}

div#HeaderBox .celebrity {
	margin: 0px 0px 0px 0px;
	font-variant: small-caps;
	text-align: right;
}

/* NAVIGATION BOX */

div#NavigationBox {
	margin: 0px 0px 0px 166px;
	padding: 0px 167px 0px 0px;
	text-align: center;
}
* html div#NavigationBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -14px;
	padding: 0px 0px 0px 0px;
}

div#MainNavigation {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #1C3369;

	width: 660px;
	min-height: 32px;
	height: 32px;
	text-align: center;
/*border: 1px dotted green;*/
}

div#MainNavigation h6 {
	margin: 6px 0px 0px 10px;
	padding: 0 0px 0 14px;
	font-family: Georgia;
	font-size: 14px;
	font-variant: small-caps;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	float: left;
	text-align: center;
}

div#MainNavigation a {
	font-family: Georgia;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
	color: #ffffff;
}
div#MainNavigation a:link {
	color: #ffffff
}
div#MainNavigation a:visited {
	color: #ffffff; 
}
div#MainNavigation a:hover {
	color: #ffffff; 
	text-decoration: underline;
}
div#MainNavigation a:active {
	color: #ffffff 
}

div#SubNavigation {
	margin: 0px 0px 0px 0px;
	padding: 0 0 0 0;
	color: #1C3369;
	background-color: #D0BCA6;
	width: 660px;
	min-height: 30px;
	height: 30px;
}
div#SubNavigation h6 {
	margin: 6px 8px 0px 10px;
	padding: 0 0px 0 16px;
	font-family: Georgia;
	font-size: 13px;
	font-variant: small-caps;
	font-weight: normal;
	font-style: normal;
	color: #1C3369;
	float: left;
	text-align: center;
}

div#SubNavigation a {
	font-family: Georgia;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	color: #1C3369;
}
div#SubNavigation a:link {
	color: #1C3369
}
div#SubNavigation a:visited {
	color: #1C3369; 
}
div#SubNavigation a:hover {
	color: #1C3369; 
	text-decoration: underline;
}
div#SubNavigation a:active {
	color: #1C3369 
}

/* CONTENT BOX */

div#ContentBox {
	margin: 0 0px 0 165px;
	padding: 30px 20px 30px 20px;
	font-family: Georgia;
	font-size: 14px;
	color: #1C3369;
	width: 620px;
	min-height: 100%;
	height: 100%;
	text-align: left;
	vertical-align: top;
}
* html div#ContentBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -14px;
	padding: 30px 0px 0px 0px;
}

div#ContentBox p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

div#ContentBox h3 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 16px;
	color: #1C3369;
	text-align: center;
}

div#ContentBox a {
	font-family: Georgia, Times New Roman;
	text-decoration: underline; 
	color: #1D3367;
}
div#ContentBox a:hover {
	text-decoration: none;
	color: #1D3367;
}
div#ContentBox a:active {
	text-decoration: none; 
	color: #1D3367;
}

div#ContentBox .ContentColumn {
	margin: 15px 0px 0px 0px;
	padding: 10px 10px 10px 0px;
	width: 190px;
	text-align: justify;
	vertical-align: top;
	float: left;

}

div#ContentBox .ContentColumn h4 {
	margin: 0px 0px 2px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumn p {
	margin: 0px 0px 17px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumnLeft {
	margin: 0 0 0 0px;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: left;

}
div#ContentBox .ContentColumnLeft h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}
div#ContentBox .ContentColumnLeft p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}


div#ContentBox .ContentColumnRight {
	margin: 0 -1px 0 0;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: right;

}
div#ContentBox .ContentColumnRight h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}
div#ContentBox .ContentColumnRight p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .DivideContent {
	clear: both;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.citation {
	font-style: italic;
}

ich hoffe Du kannst damit was anfangen. Es ist offensichtlich, dass die rechte Spalte den Content in der Mitte nach unten "drückt".

Danke schonmal

Soezkan

Maik · 22. Juni 2009

Da es sich hier um ein Layout mit fixer Breite handelt, kannst du den mittleren Spaltenblock #CenterColumn im HTML-Code zwischen den beiden äußeren Blöcken aufrufen, anstatt am Ende des Markups, und ihn im CSS mittels float:left aus dem normalen Textfluß nehmen.

Dies verhindert den verursachten Darstellungsfehler durch das angewandte clear:both im Block #ContentBox .

mfg Maik

soezkan · 22. Juni 2009

Danke schonmal für die Antwort, nur leider verstehe ich nicht was ich tun soll. Könntest Du mir nochmal helfen? Danke!

Also wenn ich das so mache wie beschrieben, dann bekommt das Design die Form einer Treppe.

HTML:

#LeftColumn

                                  #CenterColumn

                                                                    #RightColumn

Was soll ich bloss machen?

Maik · 22. Juni 2009

HTML:

<div id="centerboxmain">
        <div id="LeftColumn">...</div>
        <div id="CenterColumn">...</div>
        <div id="RightColumn">...</div>
</div>

CSS:

div#CenterColumn {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        float:left; /* Element soll rechts umflossen werden */
        width:620px; /* Elementbreite = #ContentBox */
}

div#HeaderBox {
        margin: 0px 0px -5px 0px; /* linker Außenabstand auf 0 gesetzt */
        padding: 20px 0px 0px 0px;
        font-family: Georgia;
        font-size: 12px;
        font-style: italic;
        text-align: left;
        color: #715E37;
        min-height: 78px;
        height: 78px;
        width: 580px;
}
div#NavigationBox {
        margin: 0px 0px 0px 0px; /* linker Außenabstand auf 0 gesetzt */
        padding: 0px 167px 0px 0px;
        text-align: center;
}
div#ContentBox {
        margin: 0 0 0 0; /* linker Außenabstand auf 0 gesetzt */
        padding: 30px 20px 30px 20px;
        font-family: Georgia;
        font-size: 14px;
        color: #1C3369;
        width: 620px;
        min-height: 100%;
        height: 100%;
        text-align: left;
        vertical-align: top;
}

mfg Maik

soezkan · 22. Juni 2009

Also wenn ich das so mache, verschiebts mir alles was in div#CenterColumn ist ca. 160 Pixel nach rechts. Wahrscheinlich platzt die Box aus ihren Nähten.
Ist das die einzige Möglichkeit?

1000 Dank für noch mehr Hilfe!
Soezkan

## EDIT ##

HTML:

div#CenterColumn {
	margin: 0px 0px 0px -140px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	float: left;
	width: 620px;
}

Die left margin -140px hat das Problem behoben und jetzt sieht alles Dufte aus.
Vielen herzlichen Dank für all die Hilfe

Viele Grüße
Soezkan

Maik · 22. Juni 2009

soezkan hat gesagt.:
HTML:

div#CenterColumn { margin: 0px 0px 0px -140px; padding: 0px 0px 0px 0px; text-align: center; float: left; width: 620px; }

Die left margin -140px hat das Problem behoben und jetzt sieht alles Dufte aus.

Liegt hier etwa ein Übertragungsfehler vor? :suspekt:

Und das mit diesem Code:

HTML:

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

<meta name="description" content="test">
<title>Meine Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="meineseite.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
        background:  url(images/background_rect.png) repeat-y 50% 0;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font-family: Georgia;
        background-color: #ffffff;
        text-align: center;
}

#centerboxmain {
        width: 1024px;
        padding: 0px 0px 0px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: auto;
        margin-left: auto;
        /* opera does not like 'margin:20px auto' */
        text-align:left;
        /* part 2 of 2 centering hack */
        width: 1024px; /* ie5win fudge begins */
        voice-family: "\"}\"";
        voice-family:inherit;
        width: 994px;
        min-height: 100%;
        height: 100%;
/*border: 1px dotted green;*/
}

html>body #centerboxmain {
        width: 994px; /* ie5win fudge ends */
        min-height: 100%;
        height: 100%;
}



/********************/
/** LEFT COLUMN *****/
/********************/

div#LeftColumn {
        font-family: Georgia;
        font-size: 15px;
        float: left;
        width: 140px;
        margin: 10px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        min-height: 100%;
        height: 100%;
        text-align: center;
/*border: 1px dotted green;*/
}
div#LeftColumn p {
        font-family: Arial;
        font-size: 12px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 20px 0px;
}
div#LeftColumn ul {
        margin: 0px 0 15px 15px;
        padding: 0 0 0 0;
}
div#LeftColumn li {
        font-family: Georgia;
        font-size: 15px;
        list-style: none;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

div#LeftColumn a {
        font-family: Georgia;
        font-size: 15px;
        display: block;
        text-decoration: none;
}
div#LeftColumn a:link {
        color: #666666
}
div#LeftColumn a:visited {
        color: #666666;
}
div#LeftColumn a:hover {
        color: #000000;
}
div#LeftColumn a:active {
        color: #666666
}
div#LeftColumn a.subnavi {
        font-family: Georgia;
        font-size: 12px;
        list-style: none;
        margin: 0px 0px 0px -5px;
        padding: 3px 0px 3px 0px;
}



/********************/
/** RIGHT COLUMN ****/
/********************/

div#RightColumn {
        font-family: Arial;
        float: right;
        width: 128px;
        color: #ffffff;
        margin: 17px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 15px;
        text-align: left;
/*border: 1px dotted green;*/
}

div#RightColumn h2 {
        font-size: 14px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

div#RightColumn h3 {
        font-size: 14px;
        font-weight: normal;
        margin: 0px 0px 0px 0px ;
        padding: 0px 0px 7px 0px ;
}

div#RightColumn p {
        font-size: 14px;
        color: #EAE4D6;
        margin: 7px 0px 15px 0px ;
        padding: 7px 0px 0px 0px ;
}

div#RightColumn a {
        font-family: Arial;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        color: #FB8360;
}
div#RightColumn a:link {
        color: #FB8360
}
div#RightColumn a:visited {
        color: #FB8360;
}
div#RightColumn a:hover {
        color: #FB8360;
        text-decoration: underline;
}
div#RightColumn a:active {
        color: #FB8360
}



/********************/
/** CENTER COLUMN ***/
/********************/

div#CenterColumn {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        float:left;
        width:620px;

/*border: 1px dotted green;*/
}
* html div#CenterColumn {
        margin: 20px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}

/* HEADER BOX */

div#HeaderBox {
        margin: 0px 0px -5px 0px;
        padding: 20px 0px 0px 0px;
        font-family: Georgia;
        font-size: 12px;
        font-style: italic;
        text-align: left;
        color: #715E37;
        min-height: 78px;
        height: 78px;
        width: 580px;
}
* html div#HeaderBox {/*Bug fix IE6 */
        margin: 0px 0px 0px -10px;
        padding: 0px 0px 0px 0px;
}

div#HeaderBox .celebrity {
        margin: 0px 0px 0px 0px;
        font-variant: small-caps;
        text-align: right;
}

/* NAVIGATION BOX */

div#NavigationBox {
        margin: 0px 0px 0px 0px;
        padding: 0px 167px 0px 0px;
        text-align: center;
}
* html div#NavigationBox {/*Bug fix IE6 */
        margin: 0px 0px 0px -14px;
        padding: 0px 0px 0px 0px;
}

div#MainNavigation {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-color: #1C3369;

        width: 660px;
        min-height: 32px;
        height: 32px;
        text-align: center;
/*border: 1px dotted green;*/
}

div#MainNavigation h6 {
        margin: 6px 0px 0px 10px;
        padding: 0 0px 0 14px;
        font-family: Georgia;
        font-size: 14px;
        font-variant: small-caps;
        font-weight: normal;
        font-style: normal;
        color: #ffffff;
        float: left;
        text-align: center;
}

div#MainNavigation a {
        font-family: Georgia;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
        color: #ffffff;
}
div#MainNavigation a:link {
        color: #ffffff
}
div#MainNavigation a:visited {
        color: #ffffff;
}
div#MainNavigation a:hover {
        color: #ffffff;
        text-decoration: underline;
}
div#MainNavigation a:active {
        color: #ffffff
}

div#SubNavigation {
        margin: 0px 0px 0px 0px;
        padding: 0 0 0 0;
        color: #1C3369;
        background-color: #D0BCA6;
        width: 660px;
        min-height: 30px;
        height: 30px;
}
div#SubNavigation h6 {
        margin: 6px 8px 0px 10px;
        padding: 0 0px 0 16px;
        font-family: Georgia;
        font-size: 13px;
        font-variant: small-caps;
        font-weight: normal;
        font-style: normal;
        color: #1C3369;
        float: left;
        text-align: center;
}

div#SubNavigation a {
        font-family: Georgia;
        font-size: 13px;
        font-weight: normal;
        text-decoration: none;
        color: #1C3369;
}
div#SubNavigation a:link {
        color: #1C3369
}
div#SubNavigation a:visited {
        color: #1C3369;
}
div#SubNavigation a:hover {
        color: #1C3369;
        text-decoration: underline;
}
div#SubNavigation a:active {
        color: #1C3369
}

/* CONTENT BOX */

div#ContentBox {
        margin: 0 0 0 0;
        padding: 30px 20px 30px 20px;
        font-family: Georgia;
        font-size: 14px;
        color: #1C3369;
        width: 620px;
        min-height: 100%;
        height: 100%;
        text-align: left;
        vertical-align: top;
}
* html div#ContentBox {/*Bug fix IE6 */
        /*margin: 0px 0px 0px -14px;*/
        padding: 30px 0px 0px 0px;
}

div#ContentBox p {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

div#ContentBox h3 {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 16px;
        color: #1C3369;
        text-align: center;
}

div#ContentBox a {
        font-family: Georgia, Times New Roman;
        text-decoration: underline;
        color: #1D3367;
}
div#ContentBox a:hover {
        text-decoration: none;
        color: #1D3367;
}
div#ContentBox a:active {
        text-decoration: none;
        color: #1D3367;
}

div#ContentBox .ContentColumn {
        margin: 15px 0px 0px 0px;
        padding: 10px 10px 10px 0px;
        width: 190px;
        text-align: justify;
        vertical-align: top;
        float: left;

}

div#ContentBox .ContentColumn h4 {
        margin: 0px 0px 2px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 14px;
}

div#ContentBox .ContentColumn p {
        margin: 0px 0px 17px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 14px;
}

div#ContentBox .ContentColumnLeft {
        margin: 0 0 0 0px;
        padding: 0 0 0 0;
        width: 296px;
        text-align: justify;
        float: left;

}
div#ContentBox .ContentColumnLeft h4 {
        margin: 10px 0px 5px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 14px;
}
div#ContentBox .ContentColumnLeft p {
        margin: 0px 0px 12px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 14px;
}


div#ContentBox .ContentColumnRight {
        margin: 0 -1px 0 0;
        padding: 0 0 0 0;
        width: 296px;
        text-align: justify;
        float: right;

}
div#ContentBox .ContentColumnRight h4 {
        margin: 10px 0px 5px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 14px;
}
div#ContentBox .ContentColumnRight p {
        margin: 0px 0px 12px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 14px;
}

div#ContentBox .DivideContent {
        clear: both;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

.citation {
        font-style: italic;
}
.Stil1 {
        color: #FF0000;
        font-weight: bold;
}
-->
</style>
</head>
<body bgcolor="#ffffff">

<div id="centerboxmain">
        <div id="LeftColumn"><p>&nbsp;</p>
        <p><script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxxxxxxxx";
/* Top Left Ad 120x240, Erstellt 19.06.09 */
google_ad_slot = "3418180187";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript" src="index.php-Dateien/show_ads.js">
</script><script src="index.php-Dateien/expansion_embed.js"></script><script src="index.php-Dateien/test_domain.js"></script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 240px; position: relative; visibility: visible; width: 120px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 240px; position: relative; visibility: visible; width: 120px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" src="index.php-Dateien/ads.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="120" frameborder="0" height="240"></iframe></ins></ins></p>
        <p>&nbsp;</p></div>
        <div id="CenterColumn">
        <div id="HeaderBox"> Nulla facilisi. Nulla aliquam, turpis non auctor varius, turpis diam lacinia elit, ac lobortis nibh orci at augue. Quisque eu leo ut felis rhoncus posuere. Aenean nibh lacus; bibendum at bibendum in, dapibus non ligula. <br>
          <br>
                <p class="celebrity">&nbsp;</p>
      </div>
        <div id="NavigationBox">
            <div id="MainNavigation">
                                 <h6><a href="index.php?site=startseite">Startseite</a></h6>
                                <h6><a href="index.php?site=algorithm">Algorithmen</a></h6>
                                <h6><a href="index.php?site=correspondence">Korrespondenzen</a></h6>
                                <h6><a href="index.php?site=kunst">Art Gallery</a></h6>
                                <h6><a href="index.php?site=videos">Videos</a></h6>
                  </div>
            <div id="SubNavigation">
                                <h6><a href="index.php?site=aboutme">Über mich</a></h6>
                                 <h6><a href="#">Forum</a></h6>
                                <h6><a href="index.php?site=newsletter">Newsletter</a></h6>
                                <h6><a href="index.php?site=glossar">Glossar</a></h6>
                                <h6><a href="index.php?site=disclaimer">Disclaimer</a></h6>
                                <h6><a href="index.php?site=literatur">Quellen</a></h6>
                  </div>
        </div>
        <div id="ContentBox">
                  <div style="clear: none; display: block;">
                        <a name="details"></a>
                        <h3>Überschrift</h3>
                                                        <p><br></p>
                        <div class="ContentColumnLeft">Suspendisse potenti. Nullam vestibulum, nunc non dictum elementum, orci est viverra velit, ut mollis lectus augue a enim. Quisque in dui metus; vel fringilla erat. Proin vitae massa ipsum.<span class="ContentColumnRight"> enim sem; lobortis sed ultricies eget, viverra ac justo. Sed semper ante nec diam ornare at consectetur nunc rhoncus. </span></div>
                                <div class="ContentColumnRight">Ut sagittis convallis libero, convallis luctus lorem varius sed. Etiam eu dignissim augue. Vivamus condimentum turpis sed lectus congue rhoncus. Nam elementum ligula pulvinar sem aliquam rhoncus.</div>
                                                        <div class="DivideContent">&nbsp;</div>
                        <div class="ContentColumnLeft"><span class="Stil1">Etiam commodo erat vitae neque porta laoreet</span>. Vivamus velit lorem, suscipit id iaculis eget, posuere ac elit. Aenean pellentesque lacinia lacinia? Etiam ornare, risus non pellentesque imperdiet, risus orci dapibus nunc, et vehicula dui tellus non sem. Suspendisse a ligula non nibh mollis luctus at quis risus. In lectus quam, fermentum vitae dictum non, laoreet in nisi.                                  </div>
                        <div class="ContentColumnRight">
                        <p align="center"><span class="ContentColumnLeft">Etiam commodo erat vitae neque porta laoreet. Vivamus velit lorem, suscipit id iaculis eget, posuere ac elit. Aenean pellentesque lacinia lacinia? Etiam ornare, risus non pellentesque imperdiet, risus orci dapibus nunc, et vehicula dui tellus non sem. Suspendisse a ligula non nibh mollis luctus at quis risus. In lectus quam, fermentum vitae dictum non, laoreet in nisi.</span></p>
                                </div>
                        <div class="DivideContent">&nbsp;</div>
                        <div class="ContentColumn">                          Proin ligula nisl, adipiscing ac tristique sed, sagittis ut dolor. Curabitur ut arcu in lectus bibendum tincidunt eget in diam. Mauris molestie, tellus consequat sollicitudin ornare, nunc nisi ornare mauris; sed feugiat nibh risus et nisl. Mauris congue laoreet placerat! Donec ut lectus neque. Vestibulum malesuada fringilla ullamcorper. Nunc id risus sapien, lobortis porta lorem. Donec lectus nisi, ullamcorper vel pretium non; mattis eget diam. Sed suscipit mollis nulla in faucibus. Suspendisse sed metus mauris. Mauris est ipsum, mattis quis rhoncus vel, laoreet tincidunt arcu.</div>
                        <div class="ContentColumn">                         Proin ligula nisl, adipiscing ac tristique sed, sagittis ut dolor. Curabitur ut arcu in lectus bibendum tincidunt eget in diam. Mauris molestie, tellus consequat sollicitudin ornare, nunc nisi ornare mauris; sed feugiat nibh risus et nisl. Mauris congue laoreet placerat! Donec ut lectus neque. Vestibulum malesuada fringilla ullamcorper. Nunc id risus sapien, lobortis porta lorem. Donec lectus nisi, ullamcorper vel pretium non; mattis eget diam. Sed suscipit mollis nulla in faucibus. Suspendisse sed metus mauris. Mauris est ipsum, mattis quis rhoncus vel, laoreet tincidunt arcu.</div>
                                                        <div class="ContentColumn">                                                          Proin ligula nisl, adipiscing ac tristique sed, sagittis ut dolor. Curabitur ut arcu in lectus bibendum tincidunt eget in diam. Mauris molestie, tellus consequat sollicitudin ornare, nunc nisi ornare mauris; sed feugiat nibh risus et nisl. Mauris congue laoreet placerat! Donec ut lectus neque. Vestibulum malesuada fringilla ullamcorper. Nunc id risus sapien, lobortis porta lorem. Donec lectus nisi, ullamcorper vel pretium non; mattis eget diam. Sed suscipit mollis nulla in faucibus. Suspendisse sed metus mauris. Mauris est ipsum, mattis quis rhoncus vel, laoreet tincidunt arcu.</div>
                                                        <div class="DivideContent">&nbsp;</div>
                  </div>
        </div>
        </div>
        <div id="RightColumn"><p>&nbsp;</p>
        <p></p>
        <p><script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxxxxxxxx";
/* Top Rght Ad LARGE120x600, Erstellt 19.06.09 */
google_ad_slot = "0784314028";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript" src="index.php-Dateien/show_ads.js">
</script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 600px; position: relative; visibility: visible; width: 120px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 600px; position: relative; visibility: visible; width: 120px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame2" marginheight="0" marginwidth="0" name="google_ads_frame" src="index.php-Dateien/ads_002.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="120" frameborder="0" height="600"></iframe></ins></ins></p>
        </div></div>

</div>
</body></html>

...aber nix mit margin-left:-140px

mfg Maik

✔ clear: both macht einen riesen Abstand, aber nicht immer

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

Neue Beiträge