How to set auto height nested divs

[bugzy]

Hello I have these divs.

 

Header(fix height)

Content(auto height)

Footer(fix height)

 

under content I have one sidebar

 

left-sidebar(auto height)

 

 

My problem is, div content(auto height) is not recognizing the left sidebar that's why the left sidebar is overlapping the content div..

 

Is there anyway to fix this or technique? Thanks!

[Fadion]

It's not clear what you're asking, but I'll just make a guess that you want a simple 2 columns layout with a content area and a sidebar.

 

<header></header>
<div class="wrapper">
     <div class="content"></div>
     <div class="sidebar"></div>
</div>
<footer></footer>

 

div.content { width: 60%; float:left; }
div.sidebar { width: 30%; float:right; }

[bugzy]

It's not clear what you're asking, but I'll just make a guess that you want a simple 2 columns layout with a content area and a sidebar.

 

<header></header>
<div class="wrapper">
     <div class="content"></div>
     <div class="sidebar"></div>
</div>
<footer></footer>

 

div.content { width: 60%; float:left; }
div.sidebar { width: 30%; float:right; }

 

Hello this isn't my problem...

 

 

My problem is with the height of the  "div sidebar" which is inside the  "div content".

 

Both divs height are set to auto. The problem is "div content" height is not recognizing the nested div sidebar's height so it overlaps one another...

[Fadion]

The sidebar overlaps the content? Are you floating the sidebar? If so, you'll need a to clear the float (with any clearfix solution you like).

 

If that's still not the solution, a screenshot and/or some code would help.

[bugzy]

The sidebar overlaps the content? Are you floating the sidebar? If so, you'll need a to clear the float (with any clearfix solution you like).

 

If that's still not the solution, a screenshot and/or some code would help.

 

This is what I'm talking about..

 

 

I also clear the float, here's my css code for content div and sidebar div

 

#left-sidebar{

width:15%;

height:auto;

float:left;

background-color:#CCC;

padding-top:20px;

padding-left:20px;

padding-bottom:40px;

padding-right:20px;

margin-bottom:10px;

margin-left:30px;

margin-top:10px;

margin-right:60px;

text-align:left;

}

 

 

#content{

background-color:#FFF;

width:95%;

height:500px;

text-align:left;

padding-left:30px;

padding-top:10px;

}

 

 

How can I fix this?

[Fadion]

It is happening because #content has a fixed height and it generally isn't a good idea for items that make the flow of the document.  In the meantime, #left-sidebar may become higher than those 500px of #content and there you have a problem.

 

First, you'll need to put that #left-sidebar in the document flow by a clearfix solution. The easiest way could be to add an "overflow: hidden;" property to #content, but beware that it will cut off any other elements. Next, remove the "height" of #content completely or if you really need to set a specific height, at least use "min-height".

 

I would write your rules as follows:

 

#content
{
     background: #fff;
     width: 95%;
     padding: 30px 0 0 10px;
     overflow: hidden;
}

#left-sidebar
{
     width: 15%;
     float: left;
     background: #ccc;
     padding: 20px 40px 20px 20px;
     margin: 10px 60px 10px 30px;
}

 

text-align: center and height: auto are the default values. Check if it works.

[hakimserwa]

you said div content is auto height but i can see it have a height value of 500px;

[bugzy]

you said div content is auto height but i can see it have a height value of 500px;

 

Hey sorry about that.. When I posted it I forgot that to set it back to auto..

[bugzy]

It is happening because #content has a fixed height and it generally isn't a good idea for items that make the flow of the document.  In the meantime, #left-sidebar may become higher than those 500px of #content and there you have a problem.

 

First, you'll need to put that #left-sidebar in the document flow by a clearfix solution. The easiest way could be to add an "overflow: hidden;" property to #content, but beware that it will cut off any other elements. Next, remove the "height" of #content completely or if you really need to set a specific height, at least use "min-height".

 

I would write your rules as follows:

 

#content
{
     background: #fff;
     width: 95%;
     padding: 30px 0 0 10px;
     overflow: hidden;
}

#left-sidebar
{
     width: 15%;
     float: left;
     background: #ccc;
     padding: 20px 40px 20px 20px;
     margin: 10px 60px 10px 30px;
}

 

text-align: center and height: auto are the default values. Check if it works.

 

 

I tried this overflow: hidden

 

but the whole content div moved just below the right side bar

 

code

#left-sidebar{

width:15%;

height:auto;

float:left;

background-color:#CCC;

padding-top:20px;

padding-left:20px;

padding-bottom:40px;

padding-right:20px;

margin-bottom:10px;

margin-left:30px;

margin-top:10px;

margin-right:60px;

text-align:left;

overflow:hidden;

}

 

 

#content{

background-color:#FFF;

width:95%;

height:auto;

text-align:left;

padding-left:30px;

padding-top:10px;

overflow:hidden;

}

 

 

what the problem there?

[hakimserwa]

send me you html and css codes i will sourt it out for you.