DIV Höhe automatisch nach Inhalt

[xeed]

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.



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

Hier der CSS Code zum "Container":

#content-container {
clear: left;
padding-top: 44px;
padding-right: 44px;
padding-bottom: 44px;
padding-left: 44px;
background-color: #666666;
margin-top: 22px;
margin-right: 22px;
margin-bottom: 22px;
margin-left: 22px;
-webkit-border-radius: 166px 22px 166px 22px;
border-radius: 166px 22px 166px 22px;
background-image: -webkit-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -o-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -ms-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -moz-linear-gradient(315deg, #0a0a0a, #474747);
/* Impossible to translate property background-image for webkit20110101 */
background-image: linear-gradient(315deg, #0a0a0a, #474747);
border-top-width: 11px;
border-right-width: 11px;
border-bottom-width: 11px;
border-left-width: 11px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #64c8f2;
border-right-color: #64c8f2;
border-bottom-color: #64c8f2;
border-left-color: #64c8f2;
min-height: 500px;
}

Ich verzweifel gerade daran, Danke imVoraus

 

[xeed]

AW: DIV Höhe automatisch nach Inhalt

Ok, display: inline-block scheint zu funktionieren.

Keine Ahnung ob das die sauberste Lösung ist.

MfG

 

[patrick_l]

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.

/* --| CSS |------------------- */
#content-container {
clear: left;
padding: 44px;
margin: 22px;
background-color: #666666;
border-radius: 166px 22px 166px 22px;
-webkit-border-radius: 166px 22px 166px 22px;
background-image: -webkit-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -o-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -ms-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -moz-linear-gradient(315deg, #0a0a0a, #474747);
/* Impossible to translate property background-image for webkit20110101 */
background-image: linear-gradient(315deg, #0a0a0a, #474747);
border-width: 11px;
border-style: double;
border-color: #64c8f2;
min-height: 500px;
}

Liebe Grüße, Patrick

 

[dn3d_fanboy]

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.

/* --| CSS |------------------- */
#content-container {
clear: left;
padding: 44px;
margin: 22px;
background-color: #666666;
border-radius: 166px 22px 166px 22px;
-webkit-border-radius: 166px 22px 166px 22px;
background-image: -webkit-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -o-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -ms-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -moz-linear-gradient(315deg, #0a0a0a, #474747);
/* Impossible to translate property background-image for webkit20110101 */
background-image: linear-gradient(315deg, #0a0a0a, #474747);
border-width: 11px;
border-style: double;
border-color: #64c8f2;
min-height: 500px;
}

Liebe Grüße, Patrick

Ginge nicht sogar:

border: 11px #64c8f2 double;

?

 

[patrick_l]

AW: DIV Höhe automatisch nach Inhalt

Ginge nicht sogar:

border: 11px #64c8f2 double;

?

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

#content-container {
clear: left;
padding: 44px;
margin: 22px;
background-color: #666666;
border-radius: 166px 22px 166px 22px;
-webkit-border-radius: 166px 22px 166px 22px;
background-image: -webkit-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -o-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -ms-linear-gradient(315deg, #0a0a0a, #474747);
background-image: -moz-linear-gradient(315deg, #0a0a0a, #474747);
/* Impossible to translate property background-image for webkit20110101 */
background-image: linear-gradient(315deg, #0a0a0a, #474747);
border: 11px double #64c8f2;
min-height: 500px;
}

Liebe Grüße, Patrick

 

[Jormungand]

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.

 

[webdesignheld]

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.