0

My div projects needs to have an automatic height because the project classes will be later added dynamically. The problem is that the height: auto attribute doesn't work.

HTML:

<div id="content">
    <div id="projects">
        <div id="Proj1" class="project col-md-4"></div>
        <div id="Proj2" class="project col-md-4"></div>
        <div id="Proj3" class="project col-md-4"></div>
    </div>
    <div id="lanes">
        <div id="lane1" class="lane">

        </div>
    </div>
</div>

CSS:

#projects {
    background-color: pink;
    height: auto;
    padding: 10px;
}

.project {
    background-color: yellow;
    height: 100px;
    border-style: solid;
    border-width: 1px;
}

.lane {
    height: 155px;
    background-color: green;
    border-style: solid;
    border-width: 1px;
}

I can not use overflow: auto or overflow: normal because i have draggable divs within the projects div, which can't be dragged out.

Siguza
  • 21,155
  • 6
  • 52
  • 89
LDC
  • 63
  • 1
  • 7
  • **Auto** is the default value so you don't need to set that ... also this is working fine http://jsfiddle.net/atnwjq29/ – DaniP Nov 27 '14 at 14:01
  • Already answered. See: http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase – jb510 Nov 27 '14 at 14:02
  • Thans for your answers. The clear:both div did the job, i have only always put it into the wrong place – LDC Nov 27 '14 at 14:22

0 Answers0