CODEWITHSUNDEEP
css-floatcss
Ben
Ben

Reputation: 4319

Why is my container div not expanding to show the content?

I have a container div, which contains a slide-out menu. This means I want overflow-x: hidden so that the menu is not visible when "collapsed".

However, I want the height to expand to accommodate the content. At the moment it is just adding scrollbars.

http://jsfiddle.net/bdgriffiths/ySQgm/8/

I suspect the problem may be to do with the floats on the child "menu" elements.

The CSS for the container DIV is:

.container {
   font-family:Arial; Verdana; Sans-serif;
   background: #efefef;
   border: 1px solid #bbb;
   border-bottom: 6px solid magenta;
   width: 340px;
   height:auto!important;
   overflow-x:hidden;
   overflow-y:auto;
   position:relative;
}

And then the menu is made up of the following:

.slideout {
   background: magenta;
   position: relative;
   width: 300px;
   height: 40px;
   top: 0px;
   right:-320px;
   z-index:2;
}

.clickme {
    float: left;
    height: 40px;
    width: 20px;
    background: magenta;
}
.slidebutton {
    color:#fff;
    height:40px;
    width:30%;
    text-align:center;
    background-color: magenta;
    float:left; 
}

Upvotes: 0

Views: 876

Answers (1)

Kilian Stinson
Kilian Stinson

Reputation: 2394

JSFIDDLE

I updated your fiddle. 

.content {
  z-index:1;
  /* position: absolute; */
  padding:12px;
  font-size: 0.8em;
}

The problem is the absolute position set in your .content class. Just remove it and the parent container expand as the .content height grows.

In order to let the off-canvas menu overlap your content, you need to set position to absolute for your .slideout class.

Updated Fiddle

.slideout {
  position: absolute;
  right:-290px;
  ...
}

Upvotes: 2

Related Questions