Vollständige Version anzeigen : 2 divs immer gleiche höhe


»The Gr4ndp4
14.05.2014, 13:59

Hey,

ich bin gerade dabei eine Seite für einen bekannten zu machen.

Wie die Seite grob aufgebaut ist, seht ihr im Anhang.

Mein Problem ist, das ich möchte, das sie left_box und die Middle_box, immer gleich hoch sind, und die höhe dadurch bestimmt wird, welche box mehr Inhalt hat.

Ich gehe davon aus, das sie 2 divs ( left und middle ) einen Div brauchen, der diese beide umschliest, das wäre in meinen Fall der main div.

Im Netz lese ich überall, das ich nur mit float:left arbeiten bräuchte, jedoch komme ich nie auf das Ergebniss was ich möchte.
Derzeit hab ich es so geregelt das ich die höhe für jede Seite einfach fix im css defeniert habe, was ja auch eine lösung wäre.

Jedoch möchte ich auf der Seite, aktuelles, immer neue News hinzufügen lassen, also kann ich der Seite keine fixe größe geben.
Oder gibt es da noch andere Möglichkeiten.


Link zur Seite: Olbert Werksvertretungen (;;;supptech~de/olbert/index;html)

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
raid-rush
14.05.2014, 14:05

[CSS] DIV-Boxen auf gleiche Höhe (dynamisch) - RR:Board (CSS-DIV-Boxen-auf-gleiche-H%C3%B6he-(dynamisch))

2 elemente sollen die gleiche höhe haben wie??? - RR:Board (2-elemente-sollen-die-gleiche-h%C3%B6he-haben-wie)

ist nicht so einfach, wird heute meistens mit javascript/jQuery realisiert.


Murdoc
14.05.2014, 14:53

mdn flexbox

macht float:left/right und skripte zum angleichen der höhe von elementen überflüssig.


June
14.05.2014, 14:57

du kannst z;B. auch padding und / oder margin der linken box unendlich groß machen und einfach der div außenrum sagen dass sie den overflow abschneiden soll.

Beispiel:

<style>
#master{
position: relative;
border: 5px solid #FF0004;
width: 800px;
overflow: hidden;
}
#header{
border: 5px solid #00F3FF;
width: 790px;
}
#menu{
border: 5px solid #5100FF;
width: 290px;
float: left;
overflow: auto;
padding-bottom:32767px;
margin-bottom:-32767px;
}
#content{
border: 5px solid #FF9E00;
width: 490px;
float: left;
}
</style>
<div id="master">
<div id="header">Header</div>
<div id="menu">
Menu
</div>
<div id="content">
Content
<br><br><br><br><br><br><br><br><br><br>blabla
</div>
</div>


»The Gr4ndp4
15.05.2014, 09:31

Danke schon mal für eure Antworten, ich werde mich morgen mal hinsetzen und alles durchgehen :)

- - - - - - - - - - Beitrag zusammengefügt - - - - - - - - - -

Hey,
ich hab noch eine Frage, und zwar könnt ihr mir sagen, nach was ich suchen muss, wenn es darum geht, wachsenden Inhalt auf mehere Seiten zu verteilen?

Also um so mehr Inhalt es wird, um so mehr Seite ( 1|2|3|4 .. )

danke


June
15.05.2014, 14:50

Ich würde mal fast behaupten dass es darauf ankommt wo du deine Inhalte her beziehst. Ich würds ja per PHP machen?


»The Gr4ndp4
15.05.2014, 16:13

Aus einer mysql Datenbank, ja bitte mit php :)


Ähnliche Themen zu 2 divs immer gleiche höhe
  • [CSS] Tagcloud - Unterschiedlich grosse Schriftarten gleiche Höhe
    Hallo zusammen, ich arbeite an einer neuen Website. Da will ich für den Blog auch eine Tagcloud erstellen bzw. habe ich schon gemacht: (;drinkinggames~de/test/index;php/beer-pong-blog;html) jetzt will ich aber, dass ich die tags - je nach häufigkeit der nennung - anders darstellen kann. a [...]

  • [CSS] Footer Boxen auf gleiche höhe (Float)
    Undzwar komm ich nicht klar drauf, unten im Footer die Menüpunkte "Informationen" und "Mein Konto" auf eine Höhe zu bringen!! Die Punkte sind ja in einem <u></u> gepackt. Heißt ja meines Wissens nach "underlined". Find ich aber jetzt keine schöne Lösung, geht das auch irgendwie eleganter? [...]

  • 2 elemente sollen die gleiche höhe haben wie???
    ich hab 2 elemente und weiß nicht wie ich mit css beide gleich hoch machn kann so dass die größe an das größere element anpasst je nachdem wie viel inhalt ich habe mfg AsAck [...]

  • [CSS] DIV-Boxen auf gleiche Höhe (dynamisch)
    Habe ein Problem mit meinem Layout. Und zwar möchte ich dass die boxen immer gleich hoch sind. Also sich dynamisch erweitern. Weiß aber nicht wie ich das umsetzen kann. Meine Testseite: No File | ;;xup~in (;;;xup~in/dl,66188719/thirty3;rar/) [...]



raid-rush.ws | Imprint & Contact pr