Anzeige

DIV Höhe automatisch nach Inhalt

DIV Höhe automatisch nach Inhalt | PSD-Tutorials.de

Erstellt von xeed, 12.01.2014.

  1. xeed

    xeed Noch nicht viel geschrieben

    Dabei seit:
    30.12.2010
    Beiträge:
    20
    Geschlecht:
    männlich
    DIV Höhe automatisch nach Inhalt
    Hi, das Thema wurde schon etliche male durchgekaut, leider funktioniert keine Lösung die mir Google& Co ausspuckt.

    Ganz einfaches Problem, ich will das ein Container automatisch die Höhe hat, die der Inhalt hergibt.

    [​IMG]

    Wie mach ich das, wenn der Inhalt 2-Spaltig ohne Tabelle ist?

    Hier der CSS Code zum "Container":

    Ich verzweifel gerade daran, Danke imVoraus :)
     
    #1      
  2. xeed

    xeed Noch nicht viel geschrieben

    Dabei seit:
    30.12.2010
    Beiträge:
    20
    Geschlecht:
    männlich
    DIV Höhe automatisch nach Inhalt
    AW: DIV Höhe automatisch nach Inhalt

    Ok, display: inline-block scheint zu funktionieren.

    Keine Ahnung ob das die sauberste Lösung ist.

    MfG
     
    #2      
  3. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    DIV Höhe automatisch nach Inhalt
    AW: DIV Höhe automatisch nach Inhalt

    Wenn wir jetzt dein Markup noch sehen könnten.
    Davon abgesehen kannst/solltest du deine Stylesheet kürzen. Ich habe es jetzt fix gemacht.

    Code (Text):
    1.  
    2. /* --| CSS |------------------- */
    3. #content-container {
    4. clear: left;
    5. padding: 44px;
    6. margin: 22px;
    7. background-color: #666666;
    8. border-radius: 166px 22px 166px 22px;
    9. -webkit-border-radius: 166px 22px 166px 22px;
    10. background-image: -webkit-linear-gradient(315deg, #0a0a0a, #474747);
    11. background-image: -o-linear-gradient(315deg, #0a0a0a, #474747);
    12. background-image: -ms-linear-gradient(315deg, #0a0a0a, #474747);
    13. background-image: -moz-linear-gradient(315deg, #0a0a0a, #474747);
    14. /* Impossible to translate property background-image for webkit20110101 */
    15. background-image: linear-gradient(315deg, #0a0a0a, #474747);
    16. border-width: 11px;
    17. border-style: double;
    18. border-color: #64c8f2;
    19. min-height: 500px;
    20. }
    21.  
    Liebe Grüße, Patrick
     
    #3      
  4. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    781
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    DIV Höhe automatisch nach Inhalt
    AW: DIV Höhe automatisch nach Inhalt

    Ginge nicht sogar:
    Code (Text):
    1. border: 11px #64c8f2 double;
    ?
     
    Zuletzt bearbeitet: 12.01.2014
    #4      
  5. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    DIV Höhe automatisch nach Inhalt
    AW: DIV Höhe automatisch nach Inhalt

    Klar, habe ich beim zurecht frickeln nicht drauf geachtet. Glaub gleich ab ins Bett. ;)

    Code (Text):
    1.  
    2. #content-container {
    3. clear: left;
    4. padding: 44px;
    5. margin: 22px;
    6. background-color: #666666;
    7. border-radius: 166px 22px 166px 22px;
    8. -webkit-border-radius: 166px 22px 166px 22px;
    9. background-image: -webkit-linear-gradient(315deg, #0a0a0a, #474747);
    10. background-image: -o-linear-gradient(315deg, #0a0a0a, #474747);
    11. background-image: -ms-linear-gradient(315deg, #0a0a0a, #474747);
    12. background-image: -moz-linear-gradient(315deg, #0a0a0a, #474747);
    13. /* Impossible to translate property background-image for webkit20110101 */
    14. background-image: linear-gradient(315deg, #0a0a0a, #474747);
    15. border: 11px double #64c8f2;
    16. min-height: 500px;
    17. }
    Liebe Grüße, Patrick
     
    #5      
  6. Jormungand

    Jormungand VonAllemEtwas

    Dabei seit:
    23.09.2008
    Beiträge:
    737
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, C4D R 11.5
    Kameratyp:
    Nikon D5000
    DIV Höhe automatisch nach Inhalt
    AW: DIV Höhe automatisch nach Inhalt

    Wenn die beiden innen liegenden Container mit float:left nebeneinander gesetzt sind, musst du per clear:left das erst abschließen, bevor du den äußeren Container wieder schließt.

    Alte Bauernregel: Wer floatet muss auch clearen.
     
    #6      
  7. webdesignheld

    webdesignheld Noch nicht viel geschrieben

    Dabei seit:
    19.01.2014
    Beiträge:
    6
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Master Collection CS 5.5
    DIV Höhe automatisch nach Inhalt
    Man muss nicht unbedingt clearen. Du kannst auch einfach ein overflow:hidden auf den umgebenden Container angeben. Wichtig: Keine Höhe angeben sonst wirds ja abgeschnitten.
     
    #7      
x
×
×