✔ 3 divs neben 2 großen anderen

[vandamp]

Hallo,

ich hab ein Problem ich würde gerne so etwas wie im Anhang bauen.

leider bleibt das div rechts nicht oben ausgerichtet, wenn ich in das mittlere etwas schreibe, oder ein weiteres div einfüge, verschiebt es sich um die Höhe, des in der Mitte hinzugefügten Contents nach unten.

was mache ich da falsch? kann mir da bitte jemand helfen.

<div id="root">
	<div id="m_links"><img src="img/block_left.jpg"  /> </div>
	<div id="m_root" > <!-- m_root auf  -->
             <div id="m_top" ><!-- m_top auf  -->
             <table height="150px" border="0" cellspacing="0" cellpadding="0" align="right">
             <tr>
             <td height="7" colspan="4"><? include  'menu_top.php'; ?></td>
             </tr> 
             </table>
             </div> 	<!-- m_top zu  -->
             <div id="m_mitte">  <? include 'auswahl.php';?> </div>
             <div id="m_bottom">
                  <h3 class="grey1">&copy; 2010 <a href="impressum.html" class="grey1">Impressum</a> <a class="grey1" href="index.php?status=loggedout">Admin</a></h3>
	     </div>
         </div> <!-- m_root zu  -->    
     <div id="m_rechts"><img src="img/block_right.jpg" /></div>
 </div>

das css dazu

#root {
width: 1026px;
height: 715px;
float:none;
margin-top: 0px;
}
#m_links {
float: left;
height: 715px;
width: 145px;
}
#m_root{
	width:726px;
	background-color:#FFF;
}

#m_top{
height:130px;
background-image:url(../img/xxx_logo2.gif); /*header bild*/
background-repeat:no-repeat;
}
#m_mitte{
background-color:#FFFFFF;
}
#m_bottom{
height:50px;
}

#m_rechts {
float: right;
height: 715px;
width: 145px;
}

 

[Maik]

Hi,

hier fehlt eine float-Regel für den mittleren Spaltenblock #m_root:

#m_root{
	width:726px;
	background-color:#FFF;
	float:left; /* Element wird vom nachfolgenden  #m_rechts rechtsseitig umflossen */
}

mfg Maik

 

[vandamp]

ah ! danke dachte mir es wird automatisch in die Mitte gesetzt

you are me hero

 

[Maik]

Beim Umfluß wird nichts automatisch in die Mitte gesetzt.

mfg Maik

 

[vandamp]

hmm jetzt hab ich noch Problem damit, an dem ich schon ca. ne Stunde oder 2 herum Doktor.

ich will, dass sich das div links und rechts dem div in der Mitte anpassen,
sprich wenn ich viel in die Mitte schreib, wo man runter scrollen müsste, sollten die 2 anderen(links und rechts) sich genau so strecken.

habe mir da von dr. google etwas Hilfe besorgt http://www.positioniseverything.net/articles/onetruelayout/equalheight, was auch halbwegs passt aber es schneidet einfach alles ab, so dass es nichts mehr zu scrollen gibt.

weißt du wie ich es ändern müsste, damit sich die 2 immer gleich groß sind wie das in der Mitte?

html, body {
height: 100%; /* WICHTIG STRECKT ANZEIGENBEREICH AUF 100% */
overflow: hidden;
}
#root {
width: 1026px;
float:none;
margin:0 auto;
height: 100%;
}
#m_links {
float: left;
width: 145px;
background-color:#ffce0a;
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto;/* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#m_rechts {
float: right;
width: 145px;
background-color:#ffce0a;
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */ 
padding-bottom: 32767px;
margin-bottom: -32767px;
overflow: hidden;
}
#m_root{
	width:726px;
	background-color:#FFF;
	float:left;
display:block;
}

#m_top{
height:190px;
background-image:url(../img/freistern_logo.gif); /*header bild*/
background-repeat:no-repeat;
}
#m_mitte{
background-color:#FFFFFF;
margin-top:20px;
margin-left:20px;
}
#m_bottom{
height:50px;
}

 

[Maik]

Ich würde mal sagen, dass du den CSS-Code fehlerhaft in deinen Code übernommen hast.

#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	}
#wrapper
	{
	overflow: hidden;
	}

mfg Maik

 

[vandamp]

hmm meine drei Blöcke sind #m_links , #m_rechts und #m_root aber was ist der wrapper?
wenn ich in #root overflow: hidden; schreibe schneidet er mir alles ab, wozu man scrollen müsste und macht es nicht so lang wie #m_root ist.

P.S.: danke für die schnell Antwort

 

[Maik]

Mit diesem CSS wird bei mir nichts abgeschnitten:

html, body {
height: 100%; /* WICHTIG STRECKT ANZEIGENBEREICH AUF 100% */
}
#root {
width: 1026px;
float:none;
margin:0 auto;
overflow:hidden;
}
#m_links {
float: left;
width: 145px;
background-color:#ffce0a;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#m_rechts {
float: right;
width: 145px;
background-color:#ffce0a;
overflow: hidden !important; /* FF Scroll-leiste */
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#m_root{
width:726px;
background-color:#FFF;
float:left;
display:block;
}

#m_top{
height:190px;
background-image:url(../img/freistern_logo.gif); /*header bild*/
background-repeat:no-repeat;
}
#m_mitte{
background-color:#ffffff;
margin-top:20px;
margin-left:20px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#m_bottom{
height:50px;
}

mfg Maik

 

[vandamp]

ah die Höhenangaben haben anscheinend dazu geführt

sag eins noch dann lass ich dich in ruhe schlafen
warum ist ganz oben ein bisschen was weiß?(das div schließt nicht bündig oben ab )

wenn du Lust hast bist du mal zu einem unserer Auftritte eingeladen (falls uns jemand mag )

 

[Maik]

Danke Aber schlafen geh ich noch lange nicht, und F1@Melbourne lässt auch nicht mehr lange auf sich warten

In deinem CSS fehlt diese margin-Regel, um die Polsterung zum Fensterrand abzustellen.

html, body {
height:100%;
margin:0;
}

mfg Maik