Div in einem div mit 100% Breite und Aussenabstand

tc-burgi · #1 (**permalink**) 29.08.2010, 16:01

Hallo liebes Forum,

ist es möglich einem Div in einem anderen Div eine 100%-Breite zu geben mit links und rechts 20px Abstand?

Bei mir wird der Aussenabstand derzeit on Top dazu gerechnet. Das heisst, bei 100% Breite ist der innere Div zu breit. Da ich den inneren Div-Container flexibel nutzen möchte und somit nicht weiss, welche Breite er hat kann ich nur eine prozentuale Breite angeben. Der Rand soll jedoch fix bei 20px sein.

Hat jemand eine Idee?

Viele Grüsse
Manuel

PHP-Code:


			
        echo "        <div id=\"ContentLeftBackground\">\n";

        echo "            <div id=\"ContentHeadline\">\n";

        echo "                <img class=\"leftScrew\" width=\"25\" height=\"20\" src=\"img/headline_screw_left.png\" alt=\"Eine Schraube\" />\n";

        echo "                <img class=\"rightScrew\" width=\"25\" height=\"20\" src=\"img/headline_screw_normal.png\" alt=\"Eine Schraube\" />\n";

        echo "                <div class=\"text_mainHeadline\">Hauptinhalt</div>\n";                    

        echo "            </div>\n";

        

        echo "            <div id=\"ContentBorderTop\"></div>\n";

Code:

/*	- Container für den Rahmen oberhalb des Inhalts - */
div#ContentBorderTop {
	float:inherit;
	width:auto; 
	margin:20px 10px 0px 10px;
	height:10px;
	background-color:#760000;
	border:1px black solid;
}
/*	- Container für den linken Bereich - */
div#ContentLeftBackground {
	width:70%;
	margin:2% 0% 0% 1%;
	background-color:#8f8f8f;
	padding:0%;
	float:left;
}

/*	- Container für die Überschrift über dem jeweiligen Bereich - */
div#ContentHeadline {
	float:inherit;
	width:100%;
	height:20px;
	margin:0%;
	background-image:url('../img/headline_small.png');
	background-repeat:repeat-x;
	text-align:center;
}

heiko_rs · #2 (**permalink**) 29.08.2010, 16:11

Zitat:

Zitat von tc-burgi

ist es möglich einem Div in einem anderen Div eine 100%-Breite zu geben mit links und rechts 20px Abstand?

Ja, indem es keine Breite bekommt, aber margin: 0 20px;.

tc-burgi · #3 (**permalink**) 29.08.2010, 16:21

Hallo,

vielen Dank für die schnelle Antwort. Wenn ich die Breite weglasse, dann wird mir mein BorderTop allerdings gar nicht mehr dargestellt. Es ist 1px breit oder so was. Ich hätte aber gerne, dass es die gesamtmögliche Breite ausnutzt. Egal, ob Inhalt drin ist oder nicht. Im Zweifel steht nämlich gar kein Inhalt drin, weil es eben nur ein "optischer Trenner" ist.

heiko_rs · #4 (**permalink**) 29.08.2010, 16:25

Es darf natürlich keine shrink-to-fit-width haben. Das ist bei Dir der Fall wg. float: inherit; (denn das Elternelement floatet) - diese Deklaration muss raus.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18