margin orientiert sich an border?!

[eUncle]

mir ist grad folgendes aufgefallen und ich hab kein blassen schimmer, woran das liegen könnte:

aussehen sollte es so:


natürlich ohne den roten border, und den einfach auf white setzen ist murks...



sieht aber dann mit border 0 so aus:







hier mein html-code:

<div class="layout_total">
	<div class="menu">
		<div class="box_top"></div>
		<div class="box_middle">menu</div>
		<div class="box_bottom"></div>
	</div>

	<div class="logo">
		<div class="box_top"></div>
		<div class="box_middle">logo</div>
		<div class="box_bottom"></div>
	</div>

	<div class="layout_top"></div>
	<div class="layout_middle">content</div>
	<div class="layout_bottom"></div>
</div>

hier das zugehörige css:

.layout_total
{
	border:0px solid red;
	width:1200px;
	margin:0 auto;
	padding:0;
}

.layout_top
{
	background-image:url(layout_1_top.png);
	background-repeat:no-repeat;
	width:1020px;
	height:20px;
	margin:80px 0 0 120px;
}

.layout_middle
{
	background-image:url(layout_1_middle.png);
	background-repeat:repeat-y;
	width:1020px;
	min-height:500px;
	margin:0 0 0 120px;
}

.layout_bottom
{
	background-image:url(layout_1_bottom.png);
	background-repeat:no-repeat;
	width:1020px;
	height:20px;
	margin:0 0 0 120px;
}




.logo
{
	border:0px solid blue;
	width:200px;
	margin:50px 0 0 0;
	padding:0;
	float:right;
}

.menu
{
	border:0px solid blue;
	width:188px;
	margin:120px 0 0 0;
	padding:0;
	float:left;
}



.box_top
{
	background-image:url(menu_1_top.png);
	background-repeat:no-repeat;
	width:188px;
	height:11px;
}

.box_middle
{
	background-image:url(menu_1_middle.png);
	background-repeat:repeat-y;
	width:188px;
	padding:20px;
}

.box_bottom
{
	background-image:url(menu_1_bottom.png);
	background-repeat:no-repeat;
	width:188px;
	height:18px;
}

 

[struppi]

Ich kann dein Problem nicht nachvollziehen. Dein Code sieht so aus: http://www.html.de/css/40174-margin-orientiert-sich-border.html

 

[struppi]

Mittlerweile kann ich es nachvollziehen (ich wollte den Code hier posten, darf aber nicht)
Evtl. liegt es daran CSS tutorial - Margin Collapsing

 

[eUncle]

welchen code wolltest du posten und warum darfst du das nicht?
les' ich mir mal durch, finde es aber komisch, da ich den problemfall noch nie hatte und sich die divs immer so ausgerichtet haben, wie ich ihnen befehle und nicht auf einmal nichtmehr ohne borderline

 

[struppi]

welchen code wolltest du posten und warum darfst du das nicht?

Ich hatte hier html Code posten wollen, mit dem man das Problem leichter gesehen hätte, wurde aber auf eine captcha Seite weitergeleitet. Hab das auch hier gemeldet: http://www.html.de/html-de-intern/40187-nur-noch-mit-js-new-post.html

Der Punkt ist, dass ein schwebendes Element (float, oder position:absolute) für einen margin einen Rand braucht, an dem sich das margin orientiert. der margin wird also nicht einfach dazu addiert, sondern orientiert sich an einem äußeren Element. Wenn dieses keinen Border hat, dann an dessen Inhalt. Es braucht quasi einen Rahmen, an dem es sich "abstossen" kann.

Ich hab nicht soviel Zeit um mich mit der Problematik genau zu beschäftigen, aber googlen nach "margin collapse float position border" findet eine Menge Treffer, wobei aber nicht alles auf deinen Fall zu zutreffen scheint. Da muss man sich halt mal durch lesen oder die Struktur ändern.

 

[eUncle]

danke dir :)
dann werd ich es mal übergangsweise (wie in post#1 geschrieben) "murksen" und nen border 1px solid white nehmen, sieht man nicht, fällt auch nicht auf - aber für mic persönlich ist das keine saubere lösung

dass sich der margin an äußeren elementen orientiert war mir klar, nicht jedoch am border - war der auffassung, der margin orientiert sich an äußeren elementen, also dem border, wenn keiner da ist (0px), dann eben am äußeren "rand" des div

danke nochmals :)