HTML/CSS - Faux Columns - Benötige Hilfe :)

matzi

Halli, Hallo liebes Forum.
Ich schreibe derzeit ein Template und hatte bisher viele Fehler die ich aber erfolgreich beheben konnte.
Nur jetzt stehe ich vor ein Problem was ich einfach nicht gelöst bekomme. Ich habe schon herausgefunden das es was mit den faux Columns zu tun hat, doch leider bekomme ich es einfach nicht hin.

Unzwar soll der linke Container sich immer den rechten anpassen von der höhe. Denn wenn der linke Container größer ist, sieht man ja was raus kommt. Und da im linke Container der Main Content rein kommt, muss ich da eine Lösung finde da der immer am größten sein wird.

PHP

<div id="main"><div id="platzhalter"></div><div id="content_head">      STARTSEITE    </div><div id="platzhalter"></div>   <div id="content"><div id="content_wrapper_left"><span style="color: darkred; font-weight: bold;">Links</span><br /><br /> </div><div id="content_wrapper_right"><span style="color: darkred; font-weight: bold;">Rechts</span></div><div id="platzhalter"></div></div></div>

CSS-Quelltext:

Code

#main {  margin-left: auto;  margin-right: auto;  text-align: left;  margin-top: 12px;  border: 2px solid #000000;  width: 1085px;  margin-top: 95px;}#content {  text-align: left;}
#content_wrapper_left {  width: 65%;  background: #dadada;  padding: 8px;  float: left;}
#content_wrapper_right {  background: #dadada;  padding: 8px;}
#platzhalter {  height: 3px;  background: #454545;}

Ich würde mich freuen wenn mir jemand helfen kann

threadi

Den Versuch Faux Columns einzubauen kann ich aktuell nicht in deinem Code entdecken. Eine Alternative dazu wäre übrigens die Verwendung von CSS-Tabelleneigenschaften. Also:

Code

display: table;

für #content,

Code

display: table-cell;

jeweils für #content_wrapper_left und _right.

Aber: Du hast placeholder als ID doppelt in deinem HTML-Code. Das ist nicht zulässig, kann Fehler verursachen und sollte von dir auch behoben werden.

sejuma

Ein Link zur Problemseite wäre hilfreich.
Eine Faux-Column-Hintergrundgrafik kann ich in deinem Code nicht erkennen.
Bevor du den entsprechenden Div schließt, musst du auch noch clearen:
http://www.ohne-css.gehts-gar.net/0005.php

djheke

Vielleicht willst du sowas?

HTML

<!DOCTYPE HTML>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


* {
 margin: 0;
 padding: 0;
}
#main {
 margin:12px auto;
 border: 1px solid #000000; 
 background: #dadada;  
 width:960px;
 overflow:hidden;
}
#content_head {
 padding:20px;
 background:#ada;
}


#content_wrapper_left { 
 width: 65%;  
 background: #dadada;  
 float: left;
 min-height:500px;
}


#content_wrapper_right { 
 margin-left:65%;
 background: #dad;
}


h2,p {
 padding:20px 20px 0 20px;
}
</style>
<title>Float/Margin-Layout</title>
</head>
<body>
<div id="main">


<div id="content_head"><h1>Meine schöne Homepage</h1></div>


<div id="content">
<div id="content_wrapper_left">
<h2>Links</h2>
<p>Hier ist der Hauptteil</p>
</div>
<div id="content_wrapper_right">
<h2>Rechts</h2>
<p>Das ist deine Sidebar</p>
<br style="clear:both;" /> <!-- Damit #content_wrapper_right immer die längste Spalte ist -->
</div>
</div>


</div>  




</body>
</html>

Alles anzeigen

Tags