Height auto doesn't working in div inside div

HTML & CSS
1

I found many topics but I couldn’t find solution for my problem so I started with topic. I have a container with padding top and bottom. Then, I added another inside container. Second included image and content, but if I want to display full content my image will disappear because container doesn’t automatically expand height. Here are my HTML code:

http://codepen.io/thehung1724/pen/Fvgxz

Hope anyone can help me out. Thank in advance.

2

I’m not sure I understand what you’re trying to achieve, but a quick look at your code shows this:

<div id="allinone_carousel_charming">

.allinone_carousel.charming .leftNav span, .allinone_carousel.charming .rightNav span{
border: 1px solid  #909090;
			border-radius: 50%;
			width: 82px;
			height: 82px;
			display: block;
			margin: 2px;
			font-size: 30px;
			color: #fe4444;
}

So the first thing you need to do is ensure your CSS matches your HTML. :slight_smile:

3

Even if the CSS were correct, there does not seem to be a .contentHolderUnit for it to act on in the HTML :xeye:

#allinone_carousel_charming .contentHolderUnit {
    height:auto !important;
}

In other words, unless the class .contentHolderUnit is being added by JavaScript, the CSS and the HTML do not work together.

Please be sure to let us know after you have updated your HTML and CSS on CodePen. :slight_smile:

4

Hi, the class .contentHolderUnit is being added by JS because I’m using carousel plugin. How can I fix this?

5

I putted some content under image but it can’t show all. Hope you could help me fix this. Thank in advance.

6

Mr. Hung,

This is the CSS:


.allinone_carousel.charming

The CSS is addressing an element with two classes.

This is the HTML:


<div id="allinone_carousel_charming">

The HTML contains one ID.

As @TechnoBear pointed out, , They do not match. The CSS is not addressing the HTML.

7

Hi Ronpat, the code is correctly. The final generate code here:

<div class="allinone_carousel charming">
     <div id="allinone_carousel_charming">
         <ul class="allinone_carousel_list"></ul>
     </div>

     <div class="contentHolder">
     </div>
</div>
8

Please update the code in CodePen so it contains the correct generated lines.

It would be helpful if the CodePen example is correct and shows the problem :slight_smile:

Thank you.

9

It generated by JS. I don’t know how to edit JS. Hope you can help me.

10

Sorry, someone else will have to pitch in.

11

I can’t actually work out what you are trying to do here?

It looks like some sort of vertical slider and most sliders will work on fixed heights (or responsive heights) but not auto heights because they won’t know how far to slide.

I don’t think you can just add unlimited text into that slider. Look at the documentation for the slider and see what the options are. Where did you get the script from and what effect are you trying to achieve?

12

I think this is the gist of what he it trying to do (except this is only a css mockup and no slider).
hover inside the box and the image lowers and the text drops down. Just a guess, though.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1210641-Height-auto-doesn-t-working-in-div-inside-div
2014.06.01 15:30
thehung1724
Hover inside magenta outline to lower image.
-->
    <style type="text/css">
html {overflow-y:scroll;}
html,body {
    background:#333;
    padding:0;
    margin:0;
}
h3 {color:white;}
.allinone {
    display:table;
    border:1px solid magenta;  /* */
    overflow:hidden;
    margin:50px auto 0;
}
.myloader {
    margin-top:-280px;    /* height of image 320px */
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
.highlights {
    overflow:hidden;
}
.allinone:hover .myloader {margin-top:0;}
    </style>
</head>
<body>

<div class="outer">
    <div class="allinone">
        <div class="myloader">
            <img src="http://content.screencast.com/users/HungSzczesny/folders/DC/media/11b215e5-a61c-4310-ad98-31d523c13c0a/1.jpg" width="250" height="320" alt="">
        </div>
<!-- CONTENT -->
        <div class="highlights">
            <h3>Test demo</h3>
            <h3>Test demo</h3>
            <h3>Test demo</h3>
            <h3>Test demo</h3>
            <h3>Test demo</h3>
            <h3>Test demo</h3>
            <h3>Test demo</h3>
            <h3>Test demo</h3>
        </div>
    </div>
</div>

</body>
</html>
13

I did get plugin from here: http://www.responsivejqueryslider.com/carousel_responsive.html

I tried set height to auto but nothing changed.

14

Thank you for your code but it doesn’t work with carousel plugin. I’ll try again.

15

They are responsive plugins but that doesn’t mean that they can have any amount of content (i.e. fluid height). A responsive slider usually changes the aspect ratio of the image to fit into smaller or wider viewports but doesn’t usually allow for different sized content. The content is all the same size and is then adjusted as screen width narrows or enlarges. They don’t cater for changes in each content item as that would be very awkward for a slider to manage without the whole page jumping up and time every time a different height slide was viewed.

You may need to explain in a bit more detail what you are trying to do. I can see Rons example but can’t see how that would be useful in any normal page unless there was no other content.

I’m still really confused as to the effect you are trying to achieve so please explain step by step what you want to happen :slight_smile: