Div dynamisch anpassen / Div align-Funktion

S

-SBob-

Grünschnabel
Hi Leute, bin neu hier im Forum. Hab schon einiges über die Suche gefunden (div.clear-Funktion), leider scheint es für mein Problem nicht ganz zutreffen. Im Anhang ist ein Bild, das die Ausgangslage und das Problem erläutert.

Die Seite war frühe mit Tabellen erstellt worden, jetzt versuche ich sie mit Div-Bereichen zu erstellen. Was momentan nicht klappt, dass Div-Left (rot) in der Höhe nicht automatisch an den Inhalt (div-main, blau) angepasst wird. Gibts es da einen Befehl, wie man das einfach einstellen kann?

Es geht darum, dass ich gerne ein Bild (schwarz) einfügen würde, dass immer einen Offset von 50px vom unteren Rand hat. Hab versucht einen zweiten div-Bereich (gelb) unter div-left zu erstellen, leider ohne erfolg.

Hat jemand einen Hinweis für mich?

Vielen Dank im Vorraus

Gruß

P.S.
ich kann auch den php/css-code posten, falls es erforderlich ist
 

Anhänge

  • Forum.jpg
    Forum.jpg
    14,6 KB · Aufrufe: 44
Zuletzt bearbeitet:
Einen Moment, kommt gleich

PHP: 
<body>
	<div id="all">
		<div id="header">
		</div>
		<!-- end header -->

		<div id="<?php echo $showRightColumn ? 'contentarea2' : 'contentarea'; ?>">
			<a name="mainmenu"></a>
			<div id="left">
				<jdoc:include type="modules" name="left" style="isgDivision" headerLevel="3" />
			</div><!-- left -->
			<div id="left_bottom">
			</div><!-- left_bottom -->
			<a name="content"></a>
			<div id="wrapper">
			<div id="<?php echo $showRightColumn ? 'main2' : 'main'; ?>">
				<?php if ($this->getBuffer('message')) : ?>
				<div class="error">
					<h2>
						<?php echo JText::_('Message'); ?>
					</h2>
					<jdoc:include type="message" />
				</div>
				<?php endif; ?>

				<jdoc:include type="component" />
			</div><!-- end main or main2 -->

PHP: 
body
{
	background: #000096;
	color: #000000;
	font-family: arial, helvetica, sans-serif;
	font-size: 100.1%;
	padding: 0px;
	text-align: center;
	margin-top:50px;
}

#all
{
	background: #Ffffff;
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

#left
{
	background: #cccccc;
	width: 170px;
	float: left;
}

#left_bottom
{
	background: #ff0000;
	width: 170px;
	float: left;
	height:100%;
}

#main2
{
	background: #fff;
	width:64%;
	padding: 25px 20px 20px 20px;
	position: relative;
	min-height:520px;
	float:left;
}

#main
{
	background: #ffffff;
	margin: 0 0 0 0;
	padding: 30px 20px 20px 20px;
	border-right: solid 0px #ffffff;
	position: relative;
}


#contentarea,#contentarea2
{
	border: solid 0px #000;
	margin: 0;
	padding: 0px 0px 0px 0px;
	position: relative;
	overflow: hidden;
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück