Spalte rechts wird nach unten geschoben

**soykster** · 18.06.2010 22:01

Hallo,

ich habe folgendes Problem:

Auf meiner Seite www.top-on-snow.de möchte ich rechts neben dem Main Content weitere Infos anzeigen. Dazu habe ich folgenden Code in die index.php des Templates eingefügt:

Code:

				<!-- Top Menu-->
				<jdoc:include type="modules" name="user3" />
				<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
				<!-- Content -->
				<div>
					<div class="main">
						<jdoc:include type="component" />
					</div>
					<div class="rightside">
						<jdoc:include type="modules" name="right" style="none" />
					</div>
				</div>

Wie man auf der Webseite sieht, wird das Modul "right" aber nicht direkt rechts angezeigt, sondern erst auf der Höhe, wenn der Main Content zu Ende ist.

In der CSS steht:

Code:

.main {
	border-left: 0px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	float: left;
	margin: 5px 0 5px 0;
	padding: 0px 5px 0px 5px;
	width: 598px;
}

.rightside {
	float: right;
	vertical-align: top;
	margin: 5px 0 5px 0;
	padding: 0px 2px 0px 5px;
	width: 200px;
}

Kann mir jemand sagen, was ich ändern muss, damit der rechte Inhalt wirklich direkt rechts angezeigt wird und nicht erst rechts unten???

Vielen Dank im Voraus für eventuelle Tipps.

**KaiWiesling** · 18.06.2010 22:34

Hast du kein Firefox und kein Firebug???

Es ist einfach zu breit. Mach irgendwas schmaler (Content, Rechte Spalte) oder den Container breiter.

Sobald du die Spalte von 200px auf 100px machst stehts auch daneben....

**time4mambo** · 19.06.2010 01:54

template.css Zeile 16 das Rote verändern:

Code:

.main {
border-left:0 solid #D0D0D0;
border-right:1px solid #D0D0D0;
float:left;
margin:5px 0;
padding:0 5px;
width:558px;
}

Mit dem Wert klappt es. Musst mal schauen, wo die Grenze genau sitzt - und anschließend auf den gängigsten Browsern vorsichtshalber mal überprüfen.

Axel

**redberry94** · 27.06.2010 10:10

Hallo
Ich hätte das gleiche Problem bei mir ist gerade so das es genau passen sollte auch wenn ich eins der beiden um 100px kleiner mache bleibt das Problem.
Hier einmal meine CSS und index.php

Code:

body { 
	font-size: 12px;
    font-family: Helvetica,Arial,sans-serif;
    }

#head { 
	marrgin-top: 300px;
  	margin: 0px auto;
	border: 2px dotted green;
    width: 940px;
	}

#middel { 
	margin: 0px auto;
	margin-top: 0px;
  	border: 2px dotted yellow;
    width: 940px;
	}

#bottem {
	margin: 0px auto;
	margin-top: 0px;   
	border: 2px dotted red;
   	width: 940px;
	}
		
#top {
	width: 940px;
	}
	
#content {
	width: 700px;
	text-align: left;
	border: 2px solid #000;
	}
	
#right {
    margin: 0pt 0pt 1.1em;
    float: right;
    width: 240px;
	text-align: center;
    background-color: rgb(238, 238, 238);
	}
	
#footer {
	width: 940px;
	border: solid #90C;
	margin-top: auto;
	}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
	<jdoc:include type="head" />
 	<link href="templates/template/css/template.css" rel="stylesheet" type="text/css"/>
</head>
 
<body>
	<div id="head">
    	<div id="top"> 
      		<jdoc:include type="modules" name="top" style="" />
    	</div>
	</div>
  
	<div id="middel">
		<div id="content">
			<jdoc:include type="component" style="xhtml"/>     
		</div>
        <div id="right">
        	<jdoc:include type="modules" name="right" style="" />
		</div>            
	</div>

	<div id="bottem"> 
		<div id="footer">
			<jdoc:include type="modules" name="footer" style="xhtml"   />
		</div>
	</div>
</body>

</html>

Es geht um folgende Seite: http://mirko-kraft.bplaced.net/testseite/

Hoffe ihr könnt mir weiter helfen...

**anka** · 27.06.2010 11:33

Versuche es mal damit:

template.css (Zeile 40)

Code:

#right {
background-color:#EEEEEE;
float:right;
margin:0 0 1.1em;
text-align:center;
width:230px;
}

template.css (Zeile 34)

Code:

#content {
border:2px solid #000000;
float:left;
text-align:left;
width:700px;
}

Das Folgende hat zwar nichts mit der rechten Spalte zu tun, wird aber gebraucht, damit der Footer immer unten bleibt

:

template.css (Zeile 16)

Code:

#middel {
border:2px dotted yellow;
margin:0 auto;
overflow:hidden;
width:940px;
}

**redberry94** · 27.06.2010 19:49

Perfekt Danke!!!
Allerdings glaub ich das text-algin: center; im rechten Modul nicht funktioniert wäre sehr gut wenn einer noch was gegen dieses Problem hätte.

Thema: Spalte rechts wird nach unten geschoben

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Spalte rechts wird nach unten geschoben

Na klar

Gleiche Problem!

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen