Grille
Erfahrenes Mitglied
Hallo,
komisch: dieses Problem kommt mir bekannt vor und ich glaube ich habe dafür auch schon einmal eine Lösung gefunden, aber seit zwei Tagen such ich nun schon .. daher muss ich jetzt doch fragen:
Ich habe einen Text und ein Bild in einer DIV-Box. Der Text umfließt das Bild. Leider guckt das Bild aber unten aus der DIV-Box herraus in dem es eigentlich steht. Die DIV-Box soll aber alle Elemente umschließen.
Könnt ihr mir bitte sagen wie ich diesen Fehler behebe?
die HTML Konstruktion sieht so aus:
Dies ist das CSS
komisch: dieses Problem kommt mir bekannt vor und ich glaube ich habe dafür auch schon einmal eine Lösung gefunden, aber seit zwei Tagen such ich nun schon .. daher muss ich jetzt doch fragen:
Ich habe einen Text und ein Bild in einer DIV-Box. Der Text umfließt das Bild. Leider guckt das Bild aber unten aus der DIV-Box herraus in dem es eigentlich steht. Die DIV-Box soll aber alle Elemente umschließen.
Könnt ihr mir bitte sagen wie ich diesen Fehler behebe?
die HTML Konstruktion sieht so aus:
HTML:
<div>
<div class="tt_news_latest_contentbox">
<!-- UEBERSCHRIFT -->
<div id="borderline_top"></div>
<div class="green_headline">###NEWS_TITLE###</div>
<div id="borderline_bottom"></div>
<!-- DATUM -->
<div class="tt_news_quicklink">###NEWS_DATE###</div>
<div class="tt_news_message">
<!-- BILD -->
###NEWS_IMAGE###
<!-- UNTERTITELTEXT -->
###NEWS_SUBHEADER###
</div>
<!-- WEITERKNOPF -->
<div class="tt_news_quicklink">###MORE###</div>
</div>
<div class="breakline clearfix"></div>
</div>
Code:
/* ******** PAGE ****** */
html {
margin:0px;
padding:0px;
}
body {
padding:50px 0px 0px 0px;
margin:0px;
background: url("/uploads/tf/bg.png") #b5c7dd repeat-x;
}
/* ******** VOREINSTELLUNGEN ****** */
div {
margin: 0px;
padding: 0px;
}
img {
display: block;
border: 0;
}
/* ******** DIV-BOX-SYSTEM ****** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.floatbox {
overflow: hidden;
}
.neben {
float: left;
display: block;
}
_news_latest_contentbox {
/* IE hack */
height: 1%;
line-height: 1.3;
/* IE hack end */
display: block;
}
_news_latest_contentbox IMG {
margin: 0px 5px 5px 0px;
float:left;
}
_news_quicklink{
text-align: right;
font-size: 0.6em;
}
_news_message{
margin-top:10px;
}
.green_headline {
background: #5d813c;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 0.8em;
font-weight: bold;
text-decoration: none;
color: #FFF;
padding: 0px 10px;
}
.green_headline a{
font-size: 1em;
}
.breakline {
height: 10px;
background: url("/uploads/tf/breakline.png") repeat-x;
display: block;
margin:5px 0px 10px 0px;
}
#borderline_top {
height: 4px;
background: url("/uploads/tf/borderline_top.png");
display: block;
}
#borderline_bottom {
height: 4px;
background: url("/uploads/tf/borderline_bottom.png");
display: block;
}