kostenloser Webspace werbefrei: lima-city


2 divs auf gleiche höhe bringen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    a************n

    tja ich möchte zwei divs auf dieselbe höhe bringen...
    hier mein html code (ausschnitt)
    <div id="parent">
    	<div id="logo">[...]</div>
    	<div id="left">
    		<div class="first">[...]</div>
    	</div>
    	<div id="cont">
    		<div class="first">[...]</div>
    	</div>
    </div>

    hier der dazugehöroge css
    #parent{
    	width:1200px;
    }
    
    #logo{
    	border-bottom:1px solid #005180;
    	height:100px;
    	width:1200px;
    	padding:0 0 0 0;
    	margin:0 0 0 0;
    }
    	
    #left{
    	width:280px;
    	border-right:1px solid #005180;
    	position:absolute;
      	top:109px;
      	left:auto;
    	margin-right:0px;
    	margin-top:0px;
    	padding-top:0px;
    }
    
    #left div.first{
    	background-color:#fff;
    	height:100%;
    	padding:5px;
    	padding-top:0;
    	margin-top:0;
    	margin-bottom:60px;
    
    }
    
    #cont{
    	margin-left:0;
     	width:919px;
      	position:absolute;
      	top:109px;
      	right:0px;
      	left:289px;
      	margin-top:0px;
    	padding-top:0px;
    
    }
    	
    #cont div.first{
    	margin-left:0;
      	background-color:#fff;
      	padding:5px;
      	padding-top:0;
    	margin-top:0;
      	margin-bottom:4px;
    	height:100%;
    }


    wenn ich jetzt #left/cont noch height:100% zuweise ist das ganze eben 100% vom bildschirm groß das ist mir dann aber zu groß...

    was muss ich also tun um #cont und #left gleichhoch zu bekommen???

    mfg andré
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Das schaffst du mit

    float: left;


    bzw.

    float: right;
  4. Autor dieses Themas

    a************n

    was sollen mir denn bitte floats bei der höhe helfen.... außerdem sind die divs absolut positioniert (im bezug auf #parent)

    mfg adré
  5. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    OK, dann habe ich deine Frage falsch verstanden. Ich dachte, du bringst die divs nicht nebeneinander, doch jetzt habe ich mir deinen Code genauer angesehen und festgestellt, dass #left und #cont bereits nebeneinander sind. Tja, und da sie bei mir auch eigentlich auf gleicher Höhe sind, wirst du wohl dein Problem genauer schildern müssen, bzw. einen Link mit dem gesamten Code hier posten...
  6. Autor dieses Themas

    a************n

    ich wollte wissen wie ich die divs formatieren muss damit sie gleich hoch sind.

    mfg André
  7. hk1992

    Moderator Kostenloser Webspace von hk1992

    hk1992 hat kostenlosen Webspace.

    Ich versteh auch nicht ganz genau was du jetzt möchtest, aber wie wäre es bei "height" einfach mal die Pixel anzugeben, anstatt 100% ?
  8. andre-morillon schrieb: ich wollte wissen wie ich die divs formatieren muss damit sie gleich hoch sind.

    #cont, #left {height: 100px;}
    Jetzt haben sie die gleiche Höhe!
    1.) Es ist immer hilfreicher den Link zu der Seite zu posten bzw. hochzuladen.
    2.) Durch eine absolute Angabe haben sie dieselbe Höhe, allerdings sind sie damit nicht mehr variabel in Bezug auf den Inhalt.
  9. Autor dieses Themas

    a************n

    werktags schrieb:
    2.) Durch eine absolute Angabe haben sie dieselbe Höhe, allerdings sind sie damit nicht mehr variabel in Bezug auf den Inhalt.


    und genau da liegt das problem.... da #cont idR länger ist.... aber #left soll sich eben der höhe von cont anpassen

    ease-php.xe.cx
  10. Ich habe die Befürchtung, es ist nicht einfach so möglich (hab schon mal ein ähnliches Problem gehabt).
    Sobald der Mutter-Container keine "height"-Angabe hat, wird auch height:100%; in den Kind-Containern nicht funktionieren.
    Folgender Code funktioniert nicht:
    <div style="display:block;background-color:yellow;">
    	<div style="display:block;float:left;height:100%;background-color:red;">Text A</div>
    	Text B<br>rwkhkwrh
    </div>

    Sobald man im Außen-Div eine konkrete Höhe angibt, funktioniert es. Ist der Text zu lang, so dehnt sich nur ein Container aus, ohne dynamisch das andere Div anzupassen.

    Das selbe sollte auch bei 2 Divs nebeneinander gelten: der andere <Div> kriegt es nie mit, wenn sich durch den Text die Höhe des einen <Divs> geändert hat.

    Ich rate dir, verwende Tables, wenn nicht jetz einer kommt, der Ahnung hat und Licht ins dunkele bringt.


    Beitrag zuletzt geändert: 14.6.2009 18:30:12 von zoy
  11. Du kannst ja die einfache Technik namens „Faux Columns“ ausprobieren. Der Trick dahinter ist einfach, dass man das Elternelement (in diesem Beispiel #parent) ein vertikal gekacheltes Hintergrundbild zuweist, die dann die 2 Spalten auf die gleiche Höhe „verlängern“ soll.

    Die 2 Spalten dürfen dann aber nicht absolut positioniert sein, sondern mit `float: left; float: right;` gefloatet und das Elternelement gecleart werden. (z.B. mit `overflow: hidden;`)

    Dieses Problem ist schon früher auch viele Male aufgetaucht... Man sollte eine Linkliste für CSS Problemlöser Zeugs erstellen. :wink:

    Beitrag zuletzt geändert: 14.6.2009 18:45:09 von ryanblack
  12. Ich hab da mal etwas ausprobiert: Test!
    Also zoy kam ja mit Tabelle. Mittels CSS lassen sich aber auch Tabellen realisieren: "display:table;"
    Daher erhält zunächst mal #parent, #left, #cont diese Attribut.
    Dann brauch #parent eine Höhe, wie "height: 1%". Es muss aber ne Höhe haben, damit es funktioniert.
    #left und #cont erhalten: "height:100%;"

    Ich habe das jetzt lediglich mit dem FF ausprobiert. Ich kann mir nicht vorstellen, dass das immer so schön funktioniert. Kann aber bestimmt mal jemand testen. Das würde mir auch helfen.
  13. werktags schrieb:
    Ich hab da mal etwas ausprobiert: Test!
    Also zoy kam ja mit Tabelle. Mittels CSS lassen sich aber auch Tabellen realisieren: "display:table;"
    Daher erhält zunächst mal #parent, #left, #cont diese Attribut.
    Dann brauch #parent eine Höhe, wie "height: 1%". Es muss aber ne Höhe haben, damit es funktioniert.
    #left und #cont erhalten: "height:100%;"
    Wieso sollen #parent, #left und #cont diese CSS Eigenschaft haben? 2 Tabellen in einer Tabelle macht überhaupt keinen Sinn. Und außerdem funktioniert das unter Safari nicht.

    Wenn man schon Pseudo Tabellen nutzen will, müssen #left und #cont in ein #wrapper. #parent ist dann die Pseudo Tabelle (`display: table;`), #wrapper eine Pseudo Tabellenreihe (`display: table-row;`) und #left/#cont Pseudo Tabellenzellen (`display: table-cell;`).
    #parent
      #wrapper
        #cont
        #left
    Wieso nicht gleich Tabellen nehmen, wenn's so aufwendig ist? Ein weiterer Nachteil ist, dass erst Internet Explorer 8 die CSS Tabellen`display`s unterstützt.

    „Faux Columns“ FTW.

    Ryan

    Beitrag zuletzt geändert: 14.6.2009 19:50:11 von ryanblack
  14. ryanblack schrieb: [...]
    Wenn man schon Pseudo Tabellen nutzen will, müssen #left und #cont in ein #wrapper. #parent ist dann die Pseudo Tabelle (`display: table;`), #wrapper eine Pseudo Tabellenreihe (`display: table-row;`) und #left/#cont Pseudo Tabellenzellen (`display: table-cell;`).
    #parent
      #wrapper
        #cont
        #left
    Wieso nicht gleich Tabellen nehmen, wenn's so aufwendig ist? Ein weiterer Nachteil ist, dass erst Internet Explorer 8 die CSS Tabellen`display`s unterstützt.
    Ja, da hast du Recht. Mir waren die table-...-Möglichkeiten nicht mal bekannt. Aber da es sie gibt, kann man sie benutzen. Und IE hat mit ja fast allem Probleme.
    Aber es gibt einen Grund wieso ich keine Tabellen dafür nehmen würde. Ich finde nicht, dass es semantisch richtig wäre eine Tabelle zu benutzen. Tabellen sollen Inhalte/Daten strukturiert darstellen und nicht zum Aufbau des Layout genommen werden.
  15. werktags schrieb:
    Aber es gibt einen Grund wieso ich keine Tabellen dafür nehmen würde. Ich finde nicht, dass es semantisch richtig wäre eine Tabelle zu benutzen. Tabellen sollen Inhalte/Daten strukturiert darstellen und nicht zum Aufbau des Layout genommen werden.


    Es stimmt schon, dass Tabellen eigendlich für Daten da sein sollten. Jedoch ist es in soeinem Fall sinnvoll eine Tabelle zu benutzen. Da du ja schon die css Datei hast, kannst du die Tabelle auch in <div> </div> einfügen.
  16. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!