✔ Oberster DIV erweitert seinen Rand nicht.

[Veränderung]

Hi,

im Anhang ein Screenshot von meinem kleinen Problem: Der blaue Rand soll sich dem Inhalt der innenliegenden DIVs anpassen.

<center>
<div style="border:1pt solid #0000ff;width:97%;">
    <div style="position: relative; left: 15px; width: 130px; float:left;">
    <img src="werkzeug.jpg">
    </div>
    <div style="position: relative; top:15px;">
    Hi World!
    </div>
</div>

Was mache ich falsch?
Bin dankbar für jeden Lösungsansatz, habe versucht danach zu suchen, habe aber nichts gefunden und keine richtigen Schlagworte für das Problem gefunden.

 

[Maik]

Hi,

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik

 

[Veränderung]

Dankesehr,

hatte ich mal ausprobiert, bringt aber nichts.

Ich hatte die Einbindung nach dem Rat so vorgenommen:

<div id="content" class="clearfix">
    <div style="position: relative; left: 15px; width: 130px; float: left;">
    <img src="bild.jpg">    
    </div>
    <div style="position: relative; top: 15px; text-align: left;">
    HALLO!<br>Hi<br>hi<br>World<br>World
    </div>
    </div>
</div>

CSS:

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
/* border:1pt solid #0000ff;width:97%; */
}

#content {
background:ghostwhite;
border:1pt solid #0000ff;
width:97%;
height:auto !important;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
/* siehe / Quelle http://www.tutorials.de/forum/webmaster-faq/311170-css-warum-passt-sich-die-boxenhoehe-nicht-dem-inhalt.html */

Was ist daran falsch?

 

[Maik]

Hi,

in diesem Fall ist die Positionsangabe top:15px des rechten DIVs hinderlich, und lässt sich durch den oberen Außenabstand ersetzen.

Zudem hast du da plötzlich ein </div>-Tag zuviel notiert, was auf die Funktionalität aber keine Auswirkung hatte.

<div id="content" class="clearfix">
    <div style="position: relative; left: 15px; width: 130px; float: left;">
    <img src="bild.jpg">
    </div>
    <div style="position: relative; margin-top: 15px; text-align: left;">
    HALLO!<br>Hi<br>hi<br>World<br>World
    </div>
    </div>
</div>

mfg Maik

 

[Veränderung]

Perfekt. Geht.

Vielen lieben Dank.