✔ Float im Menu und im Content trennen

[Pullmann]

Hi,

ich habe da grad ein Problem mit float. Also ich habe link und rechts ein Menu sowie halt den Content in der Mitte . Die Menus habe float: left und right;

Jetzt habe ich im Content wiederum einen Div in dem Ich link Text und rechts ein Bild brauche. Ich wollte jetzt hier auf den Text Div wiederum float:left; machen.

Das klappt auch, jedoch floaten die folgenden Boxen im Content nun auch. Ich habe dann bei dem Hauptcontainer den in immer wieder in den Conntent Div lade both:clear gemacht.

Jetzt werden aber auch die Floats von den Menus gelöscht! Wie kann ich das denn jetzt ändern das das geht

 

[Pullmann]

Also ich habe es jetzt etwas hinbekommen indem ich einfach dem Bild float:right; gegeben habe! Doch jetzt habe ich ein anderes Problem nämlich wenn die Bilder höher sind werden die einfach über den Layer in dem sie drin sind geschoben:

Wie kann ich es jetzt machen das der Layer die Höhe vom Bildlayer übernimmt?

 

[Maik]

Ein Blick in den HTML- und CSS-Code könnte eventuell mehr Licht ins Dunkel bringen

 

[Pullmann]

HI, ... ich habe den Fehler jetzt weitestgehend wegbekommen aber der Hauptlayer wird immer noch nicht angepasst:

CSS:

#news_container{
	border: 1px solid  #dddddd;
	background-color:#F8F8F8;
	margin-bottom:5px;	
}
#news_spacer{
	margin:5px;
}
#news_headline h1{
	font-family:Verdana;
	font-size:0.9em;	
	color:#990000;
}
#news_redline{	
	height: 5px;
	margin-bottom:2px;
	background-color:#990000;
	font-size:0.1em;
}
#news_subline h2{
	height:18px;
	font-family:Verdana;
	font-size:0.6em;
	font-weight:normal;
	color:#990000;
	background-image: url(../images/dots.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}
#news_content{
	font-family:Verdana;
	font-size:0.8em;
	font-weight:normal;
	color:#990000;
	margin-top:10px;
	height:120px;
}
#news_content_txt{
	margin-right:120px;
	width:340px;
	height:120px;
	font-family:Verdana;
	font-size:0.8em;
	font-weight:normal;
	color:#990000;
	margin-top:10px;
}
#news_content_pic{
    float:right;
	width:120px;
	font-family:Verdana;
	font-size:0.8em;
	font-weight:normal;
	color:#990000;
	margin-top:10px;
}

HTML:

<!--Start_NewsParse-->
<div id="news_container" |style| >
	<div id="news_spacer">
		<div id="news_redline"></div>
		<div id="news_headline">
		<h1>|header|</h1>
		</div>
		<div id="news_subline">
		<h2>|newstitel|, |datum|</h2>
	  </div>
	  <div id="news_content_pic"><img src="|bild|" height="250" width="120"></div>
	  <div id="news_content_txt">|maintxt|</div>		
	</div>
</div>
<!--End_NewsParse-->

aber sobald ich den Float aus dem Bildlayer rausnehme wird der Hauptcontainer angepasst!

 

[Maik]

Erweitere das Stylesheet mit folgender CSS-Regel:

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

<!--Start_NewsParse-->
<div id="news_container" |style| >
        <div id="news_spacer">
                <div id="news_redline"></div>
                <div id="news_headline">
                <h1>|header|</h1>
                </div>
                <div id="news_subline">
                <h2>|newstitel|, |datum|</h2>
          </div>
          <div id="news_content_pic"><img src="|bild|" height="250" width="120"></div>
          <div id="news_content_txt">|maintxt|</div>

          <div class="clear">&nbsp;</div>
        </div>
</div>
<!--End_NewsParse-->

 

[Pullmann]

HEHE genau das hatte ich just in diesem Moment auch gemacht! Danke