Verschachtelte div mit gleicher Höhe ohne Faux Columns



  • Hallo
    ich habe eine kleine Frage :
    Ich habe 2 Div (content, slide-menu-pos-1)die in einem Wrapper(content-wrapper) eingebettet sind.
    Nun passiert es, dass entweder der Content-Div oder auch der Slide-menu-Div unterschiedliche Höhen haben können. Das sieht aber unschön aus.
    Mein Recherchen haben mich auf eine Technik namens Faux Columns geführt. Allerdings habe ich um die Div jeweils eine abgerundeten Rahmen, der auch bestehen soll. Somit fällt diese Lösung weg. Außerdem finde ich es auch ziemlich umständlich - immer wenn ich die Div horizontal verschiebe muss ich das Hintergrund anpassen.
    Weiß jemand Rat und kann mir helfen beide Div auf gleich Höhe zu bringen. Da ich die Höhe im Vorfeld nicht kenne kann ich leider nicht mit absoluten Werten arbeiten.

    Hier mal meine CSS

    div#content-wrapper {
    	margin: 0 auto;
    	margin-top: 5px;
    	padding-bottom: 5px;
    	height: auto !important;
    	overflow: hidden !important; /* FF Scroll-leiste */
    }
    
    section#content {
    	margin-right: 5px;
    	min-width: 841px;
    	max-width: 841px;
    	width: auto;
    	display: inline;
    	border: 1px dotted #cc3c3c;
    	border-radius: 5px;
    	float: left;
    }
    
    section#slide-menu-wrapper {
    	min-width: 200px;
    	max-width: 200px;
    	height: 100%;
    	border: 1px dotted #cc3c3c;
    	border-radius: 5px;
    	background-color: #153f6a;
    	float: left;
    	color: #FFFFFF;
    	border: 1px dotted #cc3c3c;
    }
    
    section#slide-menu-pos-1,section#slide-menu-pos-2 {
    	margin: 0px;
    	margin-top: 5px;
    	padding: 0px;
    	min-width: 200px;
    	max-width: 200px;
    }
    

    Und hier der html code

    <!-- CONTENT - WRAPPER -->
    	<div id="content-wrapper">
    
    		<section id="content">
    			<article id="article-text">
    				<jdoc:include type="message" />
    				<jdoc:include type="component" />
    			</article>
    			<jdoc:include type="modules" name="image-show" style="xhtml" />
    		</section>
    
    		<section id="slide-menu-wrapper">
    			<jdoc:include type="modules" name="slide-menu-pos1" style="xhtml" />
    			<jdoc:include type="modules" name="slide-menu-pos2" style="xhtml" />
    		</section>		
    
    	</div>
    

    Vielen Dank


  • Mod

    Ist die Breite fix?

    Wenn nicht, dann ist die einfache Lösung, die dich etwa 3 Million Style Punkte kostet, eine Tabelle zu verwenden. Spalten in CSS brauchen eine fixe Breite wenn man nicht verrückt werden will. Und mit fix meine ich etwas wie "20%". Es muss natürlich keine genaue Pixel Anzahl sein.


Anmelden zum Antworten