|
|||
DIV höhe an Eltern DIV auto anpassen
Hi Pros,
sitz am Aufbau einer Seite ohne Tabellen. Nun es klappt bestens. Nun benötige doch Eure Hilfe. Ich möchte erreichen das der Linke und der Rechte DIV Ihre Höhe dem mittleren (mit Text) anpassen. So sieht es jetzt aus: So wärs optimal: hier mein CSS: Code:
html, body { /*height:100%;*/ background-color: #F5F5F5; font:Geneva, Arial, Helvetica, sans-serif; font-size:13px; margin: 0; } /*--| MainContainer - beinhaltet die komplette Seite |------------------------*/ #main { margin:auto; font-family:Verdana; text-align: left; background-color: #FF0000; width: 760px; padding: 6px; font-weight:bold; } /*--| headerContainer - beinhaltet Logo,Mainmenü und Topmenü |------------------------*/ #header { float: left; position: relative; background-color: Fuchsia; width: 100%; height: 116px; /*border:#FFFFFF solid 1px;*/ } /*--| LogoContainer - beinhaltet Logo und den Titel der Seite |------------------------*/ #logo { float: left; background-color: #99CC33; width:300px; height: 80px; } /*--| TopNavContainer - beinhaltet die Topmenüausgabe |------------------------*/ #topnav { float: right; text-align:right; vertical-align:top; background-color: Lime; width: 350px; height: 36px; } /*--| LogoContainer - beinhaltet Logo und den Titel der Seite |------------------------*/ #mainnav { float: left; background-color: #FFCC00; width: 100%; height: 36px; } /*--| LeftContainer - beinhaltet linke Spalte |------------------------*/ #content { position:relative; width: 100%; vertical-align:top; padding: 0px; margin:0px; } /*--| LeftContainer - beinhaltet linke Spalte |------------------------*/ #left { float: left; background-color: Aqua; width: 200px; } /*--| MiddleContainer - beinhaltet mittlere Spalte / Content |------------------------*/ #middle { float:left; background-color: #fff; font-weight: normal; width: 360px; padding: 4px; } /*--| RightContainer - beinhaltet linke Spalte |------------------------*/ #right { float: left; background-color: #0099FF; width: 192px; } /*--| FooterContainer - beinhaltet linke Spalte |------------------------*/ #footer { float: left; background-color: #FFFFCC; width: 100%; height: 60px; /* border:#FFFFFF solid 1px;*/ } Code:
<div id="main" align="center"><!-- main-container - der hält alles und macht die Positionierung --> <!--Header --> <div id="header"> <div id="logo">Logo</div> <div id="topnav">topnav</div>header <div id="mainnav">Mainnav</div> </div> <!--Left --> <div id="left">Left<br style="clear:left;"></div> <!--Middle --> <div id="middle"> <strong>Middle</strong> <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. </div> <!--right --> <div id="right">Right<br style="clear:left;"></div> <div id="footer">Footer</div> <br style="clear:left;"> </div> Kernproblem ist die Autohöhe der DivContainer "left" und "right". Vieleicht gibt es ja bei Euch den entscheidenen Tip. Danke schon mal. TabTwo |
Sponsored Links |
|
||||
Hallo
Also wenn ihc mich niht irre, müsste es mit der Faux Columns TEchnik machbar sein, also bei 2 Spalten auf jeden Fall. Bei 3 Spalten, müsste es theoretisch auch gehen. Faux Columns |
Sponsored Links |
|
|||
Danke schon mal.
Ich möchte jedoch den Einsatz von einer absoluten Positionierung möglichst umgehen. Dies scheint für den Lösungsansatz nötig zu sein. Bin aber noch am lesen. Der link ist echt gut |
|
|||
Der Link beschreibt ausführlich die Lösung mit einer ensprechend gestalteten "Fake" Grafik die ich dem Elternelement als Hintergrung anbinde. Das jedoch ist nicht mein Ziel. Ich würde gern erfahren ob es möglich ist über CSS die Höhe der DIV´s in diesem FloatModell automatisch an das Mittlere "Content" DIV anzupassen.
Vielleicht mit "richtig positionierten Clear elementen". |
|
|||
habe in Euren FAQ diesen Link gefunden das wäre zumindest teilweise die Endlösung. ich schau mir das Morgen noch mal im Detail an.
Vielleicht geht es ja doch ! Wenn ja "pflücke" ich es auseinander und poste es. Gruß & Danke für die Hilfe |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV automatische Höhe | in-flames | CSS | 13 | 20.05.2011 20:49 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Div Wight Auto???? | temp11 | CSS | 8 | 30.06.2009 13:34 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |
höhe eines div tag an ein anderes anpassen | ffr | CSS | 4 | 09.12.2003 17:59 |