CODEWITHSUNDEEP
cssheight
Jenz
Jenz

Reputation: 8369

Height of div not increasing according to the content

The height of my div is not increasing with the content.

HTML :

<div style="position: relative;min-height: 200px;clear: both;margin: 25px 0;border:1px;solid black;width:500px;">
        <div style="float:left;">
            <label class="tab"> Review</label>

            <div class="tabcontent">
                 /* contents here */
                <div id="moviereviews">
                </div>
               </div>

        </div>

        <div style="float:left;">
            <label class="tab">Comments</label>

        </div>
</div>

CSS:

.tab
{
    background: #eee; 
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;

}

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc; 
}

I tried adding overflow: hidden; to the main div. But yet it is not increasing the height. Also I have a footer div after the above shown code as:

<div class="footer"></div>

// CSS
.footer {
margin-top: 10px;
background: #ECE5B6;
float: left;
position: relative;
width: 100%;
z-index: 10;
height: 100px;
}

Can anyone help me to fix this?

Thanks in advance.

Upvotes: 0

Views: 5888

Answers (7)

Animesh
Animesh

Reputation: 1023

This will work for you too

.tab
{
    background: #eee; 
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;    
}

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  width:100%;
  height:auto;
  border: 1px solid #ccc; 
}

check this

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

you have to add height:auto and remove bottom:0 in class tabcontent 

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  border: 1px solid #ccc; 
  height:auto; /*Added Line*/
}

Here is the Demo.

Upvotes: 1

Richa
Richa

Reputation: 3289

Set the height:auto in tab content and also make sure width is 100%

And take a look at fiddle DEMO.

Have made changes and hope it works.

.tab
{
    background: #eee; 
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;


}

.tabcontent {
  top: 28px;
  left: 0;
      background: white;
     height:auto;
    width:100%;
      border: 1px solid #ccc;
    overflow-wrap:break-word;
}

Upvotes: 0

Jenz
Jenz

Reputation: 8369

Thanks to all. I think may be some other css is making my code from not working according to yours. I solved it by adding overflow:hidden; to both 

<div style="position: relative;min-height: 200px;overflow: hidden;clear: both;margin: 25px 0;border:1px solid black;width:500px;">

and .tabcontent div.

Upvotes: 2

Aditzu
Aditzu

Reputation: 706

Just add:

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc; 
  height:100%;
}

Here's your demo http://jsfiddle.net/m5Q7Q/

Upvotes: 1

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Check this Demo jsFiddle

Remove right: 0; bottom: 0; property and add width:100%; height:auto;. you can set width on yourself either fixed or relative.

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  width:100%;
  height:auto;
  border: 1px solid #ccc; 
}

Upvotes: 1

Grzegorz Adam Kowalski
Grzegorz Adam Kowalski

Reputation: 5565

Remove bottom: 0; from .tabcontent

Upvotes: 0

Related Questions