Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Height and Overflow

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39261
    wanny
    Member

    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

    #107504
    Paulie_D
    Moderator

    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.

    #107505
    wanny
    Member

    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.

    #107509
    Paulie_D
    Moderator

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

    #107510
    Paulie_D
    Moderator

    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.

    #107512
    wanny
    Member

    Oh i get it ! thank you :D

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.