CSS 2 Spalten Layout Überlagerung

J0hn B0y

J0hn B0y

Mitglied
Hallo zusammen. Ich versuche ein 2 Spalten Layout aber ich kriege es nicht, das beide Spalten nebeneinander (links, rechts) liegen.

Auf dieser Seite http://test.brainlag.eu/pages/bnc_rules unter "RULES DEUTSCH" (großer Button mittig unter "Welcome Message") kann man das ganze betrachten.

Folgenden Code nutze ich derzeit
HTML:


HTML: 
<xen:include template="wiki_tiles" />
<xen:require css="wiki_component.css" />

<!-- BNC Welcome Message -->
<div class="md-modal md-effect-4" id="modal-4">
	<div class="md-content">
	<h3>Welcome to brainlag´s Knowledgebase</h3>
		<div class="wikiCenter">
			<p>As one of the first Free BNC Providers in Quakenet we support, as far as possible, anyone with Free BNCs for many Years.</p>
			<p>IRC Bouncers should be realiable, fast and good quality - just like any other Hosting.</p>
			<p>And even though we're free, we do offer the same level of support, best connectivity and many vhosts.</p><br>
			<p>brainlag - Your Quality, Reliable, Free BNC Provider.</p>
		</div>
		<button class="md-close">Close me!</button>
	</div>
</div>
<div class="md-modal md-effect-12" id="modal-12">
	<div class="md-content-effect-12">
	<h3>brainlag BNC Regeln</h3>
		<div class="wikiContainer">
			<div class="leftCol">
				<p>Q-Auth</p>
				<p>Du musst bei Q geauthed sein. Infos findest Du unter <a href="http://www.quakenet.org/help/q-commands/auth" target="_blank" class="externalLink">quakenet.org</a>.
				Q Accounts (Q-Auth) die erst vor kurzem erstellt wurden, können keinen BNC requesten.
				Eine Request ist <b><u>erst</u></b> nach einigen Tagen möglich.</p>
			</div>
			<div class="leftCol">
				<p>Eggdrops</p>
				<p>Keine BNCs für Eggdrops</p>.
			</div>
			<div class="leftCol">
				<p>SPAM/K-/G-Line.</p>
				<p>Verhindere SPAM/K-Line/G-Line.</p>
			</div>
			<div class="leftCol">
				<p>#brainlag Channel</p>
				<p>Bleib mit deinem BNC in #brainlag.</p>
			</div>
			<div class="rightCol">	
				<p>Nur echte User</p>
				<p>Keine BNCs um Deinen Clan- und/oder Channelnamen wiederzugeben. BNCs sind nur für echte User.</p>
			</div>
			<div class="rightCol">	
				<p>1 BNC pro User</p>		
				<p>Hast Du bereits einen BNC bei einem anderen Anbieter, bekommst Du keinen mehr von uns.</p>
			</div>
			<div class="rightCol">	
				<p>Netzwerk Regeln</p>
				<p>Halte Dich an die Netzwerk (Quakenet) und Channel (#brainlag) Regeln.<br>Detaillierte Infos findest Du unter <a href="http://www.quakenet.org/faq/faq.php?c=1" target="_blank" class="externalLink">quakenet.org/Main-Rules</a>.</p>
			</div>
			
			<div class="motalClearfix"></div>
			<div class="centerCol">	
				<p>Nicht genutzte BNCs</p>
				<p>BNCs werden automatisch, nach <b><u>8 Wochen Nichtnutzung</b></u>, vom System gelöscht.<br><br>Längere Offlinezeiten  sollten dem brainlag Team, mit Grund (Krankheit, Urlaub etc.) und Zeitangabe, mitgeteilt werden.<br>Der BNC wird dann für den angegebenen Zeitraum vor dem automatischen Löschen geschützen.</p>
		</div>
		<div class="centerCol">	
				<p>Sollte niemand vom brainlag Team im IRC online sein, schreib uns im <a href="http://www.brainlag.eu/forum/#support.210" target="_blank" class="externalLink">Support Forum</a>.</p>
				<p>Hast Du deine BNC Daten erhalten, verbinde dich innerhalb von 24h einmal mit deinem BNC, da dieser sonst als Idle BNC erkannt und automatisch gelöscht wird.</p>
		</div>
		<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
	
<!-- Buttons and Javascript -->
<div class="baseHtml sectionMain brainWiki">
	<div class="tilesLabel">Welcome</div>
	<button class="md-trigger" data-modal="modal-4">Welcome Message</button>
	<p id="MainTilesBorder"></p>

	<div class="tilesLabel">Rules</div>
	<button class="md-trigger" data-modal="modal-12">Rules deutsch</button>
	<p id="MainTilesBorder"></p>	
</div>
<div class="md-overlay"></div><!-- the overlay element -->

		<!-- classie.js by @desandro: https://github.com/desandro/classie -->
		<script src="js/collapse/classie.js"></script>
		<script src="js/collapse/modalEffects.js"></script>

		<!-- for the blur effect -->
		<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
		<script>
			// this is important for IEs
			var polyfilter_scriptpath = '/js/';
		</script>
		<script src="js/collapse/cssParser.js"></script>
		<script src="js/collapse/css-filters-polyfill.js"></script>

Und das ist der CSS Teil:
Code: 
div.wikiContainer {
    border: 1px solid #000000;
    float: left;
    overflow: auto;
    width: 100%;
}
div.leftCol{
    border: 2px solid;
    float: left;
    width: 50%;
}

div.rightCol {
    border: 2px solid black;
    float: right;
    width: 50%;
}

div.centerCol {
width: 100% ; }

.motalClearfix {
    clear: both;
    padding-top: 20px;
}

Bin für jede Hilfe dankbar.
 
Hier mal ein Beispiel

Code: 
<div class="outer">
  <div class="left"></div>
  <div class="right"></div>
</div>

.left{
  float:left;
}

.right{
  float:right;
}

.outer{
   clear:both;
}
 
Ok ich Depp, hab alles in einzelne Divs gesetzt. Jetzt muss ich allerdings noch n padding zwischen die einzelnen Textteile, die nicht zusammen gehören setzen.

Optimal ist es auch nicht
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück