✔ p im absolute positionierten div -> div vergrößern

[Layna]

Hallo.
Ich stehe irgendwie total auf dem Schlauch, ich bin SICHER ich hatte so etwas schonmal...
Ich habe ein div mit position:absolute, in diesem ist ein p-tag.
WAS muss ich tun damit das div sich mit der länge des p-inhaltes vergrößert?
Bitte bitte, zerschlagt das Brett vor meinem Kopf...

Layna :-(

PS: Und noch ein porblem, ich hasse den IE...
Im IE läuft der p-tag über das umgebende (absolut positionierte) div hinaus...

 

[Maik]

Hi,

kannst du mal zum Vergleich deinen Quellcode zeigen, denn das folgende "Konstrukt" funktioniert in allen mir zur Verfügung stehenden Browsern einwandfrei, darunter auch im IE 6 + 7, sprich die Box vergrößert sich bei zunehmenden Inhalt.

#box {
position:absolute;
left:20px;
top:20px;
background:red;
}

<div id="box">
     <p>dummy text<br>dummy text</p>
     <p>dummy text</p>
</div>

 

[Layna]

Ok, hier dann mal den code:

<div id="deko_border">  

	<div id="content_box">     
		<div id="nav"> 
			<img src="logo.jpg" alt="" />
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Noch ein Link</a></li>
				<li><a href="#">Und noch einer</a></li> 
				<li><a href="#">Der kann auch ganz lang werden, da muss ich nochmal gucen</a></li>
			</ul>
		</div>  
		<div id="main">
			<img src="car.jpg" alt="" height="80" width="135" id="car" />
			<h1>&Uuml;berschrift der Seite</h1>
			<p>   
                           Stell dir hier viel Text vor
			</p>
		</div>
	</div>

</div>

Mit folgendem CSS:

/*======================
        Resets
=======================*/

html, body, div, p, h1, h2, h3, h4, h5, h6, ul, li {
	margin: 0px;
	padding: 0px;
	border: none;
}

html, body {
	height: 100%;
	background-color: #000096;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
	text-decoration: none;
}

div, p {
	position: relative;
}


/*======================
        Optik
=======================*/

#deko_border{
	background-image: url(velvet.jpg);
	padding: 30px;
	margin: 50px;
	border: 2px solid #00CED1;
}

#content_box{
	background-color: #AFEEEE;
}

#nav {
	background-image: url(navbg.jpg);
	background-repeat: repeat-y;
	padding-right: 100px;
	padding-bottom: 40px;
	width: 150px;
}


#nav ul {
	list-style: none;
	margin: none;
	margin-top: 20px;
}

#nav li {
	text-align: center;
	margin: none;
	padding: 3px 5px;
}

#main {
	position: absolute;
	top: 0px;
	left: 250px;
}


#main #car {
	border-right: 2px solid #032A85;
	border-bottom: 2px solid #032A85;
	float: left;
	background-color: White;
	padding-right: 3px;
	margin-right: 20px;
	margin-bottom: 5px;
}

#main h1 {
	font-size: 150%;
	padding-top: 10px;
	padding-bottom: 15px;
	text-decoration: underline;
}

#main p {
	padding: 0px 7px 10px 7px;
}


/*======================
        Navi
=======================*/

#nav a,  #nav a:link, #nav a:visited {
	display: block;
	text-decoration: none;
	color: Aqua;
	font-weight: bold;
	font-size: 90%;
}

#nav a:active, #nav a:focus, #nav a:hover{
	color: #FF6D35;
}

Da ich keine vorstellung habe welcher nebeneffekt es sein köntne habe ich mal alles gepostet, egal ob es mir relevant vorkommt oder nicht .

Eine sehr verwirrte Layna

 

[Maik]

Es handelt sich hierbei um das DIV #content_box, das in der Höhe nicht zunimmt, da das DIV #main darin absolut positioniert ist. Letzteres verhält sich so, wie ich es vorhin überprüft hatte.

Abhilfe schafft da eine relative Positionierung.

 

[Layna]

Muss ich dann zwangsläufig mit floats arbeiten? Oder gibt es einen weg zwei divs ohne float und mit position relative nebeneinander zu positionieren?

Layna

 

[Maik]

#nav {
        background-image: url(navbg.jpg);
        background-repeat: repeat-y;
        padding-right: 100px;
        padding-bottom: 40px;
        width: 150px;
        float: left;
}

#main {
        margin-left: 250px;
}

 

[Layna]

Ich nehme das als "ja, Floats sind dann zwang" ^^.

Dankeschön... und irgednwann in den nächsten 300 Jahren verstehe ich auch noch einmal wie sich die position-angaben verschachtelt verhalten... :suspekt:

Layna

 

[Maik]

Muss ich dann zwangsläufig mit floats arbeiten? Oder gibt es einen weg zwei divs ohne float und mit position relative nebeneinander zu positionieren?

Wenn die Höhe des ersten Elements bekannt ist, liesse sich das zweite Element ausschliesslich mit der margin-Eigenschaft daneben anordnen.

#box1 {
width:150px;
height:200px;
}
#box2 {
margin:-200px 0 0 150px;
}

Ich nehme das als "ja, Floats sind dann zwang" ^^.

Da dies bei dir aber nicht der Fall ist, wird die float-Eigenschaft benötigt.