CSS Height and Overflow

[wanny]

Hello all !

First of all, sorry for my bad english ;D

I have 3 div.

One serves to contain the other two, the code is below

.dbox{

overflow: hidden;

margin: 20px auto 0 auto;

height: auto;

width: 830px;

border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

}

the height is set to auto, because the content is variable and depends on the amount of text that is shown

the second is a bar to the title with fixed height of 50 px

.dbox-title{

display: block;

position: relative;

width: 828px;

height: 50px;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

background-color: #ccc;

border: 1px solid #cecece;

background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d3d3d3));

background: -moz-linear-gradient(top, #f6f6f6, #d3d3d3);

text-shadow: 0 -1px 0 white;

text-align: center;

line-height: 50px;

font-size: 18px;

}



// multiple border



.dbox-title:before{

content: '';

position: absolute;

width: 828px;

height: 48px;

border: 1px solid white;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

display: block;

border-bottom: 0px;

border-left: 0px;

border-right: 0px;

}

the problem is with the third, this also has variable height because it is the text container.

.dbox-content{

width: 800px;

height: auto;

border: 1px solid #ced3d7;

padding: 1em;

border-top: 0px;

background-color: #fff;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-webkit-border-top-left-radius: 0px;

-webkit-border-top-right-radius: 0px;

float: left;

}

why, if I put overflow: hidden; the container takes a height equal to 0? while putting overflow: hidden everything seems to work properly.

I hope for your help

[Paulie_D]

Could you put this on Codepen with your HTML?

If you float a div it will collapse unless you have set specific widths & height (I think) unless there is content in there.

Are these divs supposed to be stacked in a column? I’m having trouble visualising what it is you are trying to achieve.

[wanny]

http://codepen.io/anon/full/uECHx look at this

if you use overflow: hidden; the div “active-support-request” takes the correct height. Otherwise the height value is 52 (830px * 52), ie the height of the title bar

I’m new to the language of CSS, I know that the overflow is used to determine how it should behave the browser with the contents of a div, so I do not understand why it behaves this way.

[Paulie_D]

OK, I took a guess in the meantime but here’s where I am: http://codepen.io/Paulie-D/pen/lAgvu

[Paulie_D]

You really don’t have to define the height of a div as it will expand to fill the content within it. If you need some extra height for design reasons you can always add padding or (if you must) set a defined height.

If you set a fixed height that is LESS than the actual height needed to show all of the content and THEN set overflow hidden it will shrink the div to the height you have set and hide whatever is left over.

[wanny]

Oh i get it ! thank you :D

[Author]

Posts