tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von franz007
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
540
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 02.07.11 14:28 #1
    daniel_sun daniel_sun ist offline Mitglied Gold
    Registriert seit
    Mar 2006
    Beiträge
    100
    Hallo,

    ich habe folgendes html-dokument:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
	<title>XXX</title>
</head>
<body>
	<div id="root">
    	<div id="header">XXX</div>
		<div id="left">
        	<div id="navigation_categorie">Kategorie</div>
            <div id="navigation_links"><a href="_sample.tpl">Link 1</a></div>
        </div>
   	 	<div id="content">Mitte</div>
        <div id="right">Rechts</div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>
    Dazu folgendes CSS-Dokument:

    HTML-Code:
    @charset "utf-8";
/* CSS Dokument der Hauptseite */
/* Generelle einstellungen der Seite*/
body
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;	
}
/*Unsichtbarer DIV-Container um die Elemente auf der Seite zu zentrieren*/
#root
{
    position:relative;
	width:1000px;
    margin: 0px auto;
    border: 1px;
	display:block;
}
/*Header der Website*/
#header
{
 	background-color:#009900;
	color:#FFFFFF;
	width:1000px;
	height:100px;
	font-size:40px;
	text-align:right;
}
/*Linke Spalte der Website*/
#left 
{
	width:175px;
	float:left;
	background-color:#c0c0c0;
	display:block; 
}
/*Inhaltsteil der Website*/
#content
{
	width:650px;
	float:left;
	display:block;; 
}
/*Rechte Spalte der Website*/
#right 
{
	width:175px;
	display:block;
	float:right;
	background-color:#c0c0c0;
}
/*Footer der Website*/
#footer
{
	width:1000px;
	clear:both;
	background-color:#c0c0c0;	
}

    Mein Problem ist nun, dass ich die 3 Spalten (left, content,right) nicht auf eine Höhe bekomme. Sie sind jeweils nur so lang wie ihr Inhalt. Sie sollen sich aber dem Längsten anpassen, so das alle bis zum Footer reichen.

    Bitte um Hilfe. Schickt mir nun bitte keine Links zu Beispielen. Hab gegoogeld und das Forum duchsucht und mir wirklich alle Beispiele dazu angeguckt und versucht es in meinen Dokumenten umzusetzen aber es klappt einfach nicht.

    Wäre toll wenn mir jemand sagen könnte wo konkret in bei mir der Fehler liegt und wie er zu beheben ist.

    Gruß
    daniel_sun
     
    Zitieren Zitieren
  2. 03.07.11 08:35 #2
    franz007 franz007 ist offline Mitglied Platin
    Registriert seit
    Sep 2004
    Beiträge
    600
    Hallo

    Zwei Elemente sind immer nur so groß wie deren Inhalt es erfordert.

    Du kannst das optisch umgehen wie zb hier http://www.alistapart.com/articles/fauxcolumns aber sonst gibt es in CSS2 meines wissens keine andere Lösung.
    daniel_sun bedankt sich. 
    Zitieren Zitieren
  3. 08.08.11 21:37 #3
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von franz007 Beitrag anzeigen
    Zwei Elemente sind immer nur so groß wie deren Inhalt es erfordert.

    Du kannst das optisch umgehen wie zb hier http://www.alistapart.com/articles/fauxcolumns aber sonst gibt es in CSS2 meines wissens keine andere Lösung.
    Für weitere "CSS2"-Techniken zur optischen Täuschung von automatisch angeglichenen Spaltenhöhen siehe AnyColumnLongest.
    Geändert von spicelab (08.08.11 um 21:46 Uhr) Grund: Tipp-Ex
     
    Zitieren Zitieren
« Zwei Divs nebeneinander gleiche Höhe | Frage zu CSS-Sprites »

Ähnliche Themen

  1. Doppelte Datensätze (bestimmte Spalten) aber alle Spalten anzeigen
    Von TutorialKing im Forum Relationale Datenbanksysteme
    Antworten: 8
    Letzter Beitrag: 04.08.11, 12:15
  2. Typo3 Statischer Footer mit 4 Spalten?
    Von vodka im Forum Content Management Systeme (CMS)
    Antworten: 1
    Letzter Beitrag: 30.05.11, 09:39
  3. Sticky Footer DIV überdeckt darüberliegende DIVs wenn Footer-Inhalt zu viele Zeilen
    Von soezkan im Forum CSS
    Antworten: 0
    Letzter Beitrag: 12.05.11, 14:29
  4. Footer will kein Footer sein
    Von thigle im Forum CSS
    Antworten: 30
    Letzter Beitrag: 14.02.10, 22:15
  5. 3 Spalten tabelle breite 2 Spalten Fest 1 dynamisch
    Von mrno im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.06.08, 00:24