Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Help To Make A Class 100% min-height

    In the code below is some css I am working on. I am trying to define a min-height of 100% for the class .content-right. I can define a min-height to .content-wrap and it works great. The entire container expands to the min-height defined which is great, but I really want .content-right to have a min-height defined. ANy techniques or ideas would be much appreciated. The only container I am concerned about / want to have the min-heaight is the .content-right class.

    Here is my css
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        margin:0;
        outline: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        font-style: inherit;
        font-family: inherit;
        vertical-align: baseline;
        line-height: 1.3;
    }
    
    html {
        width:100%;
        height:100%;
    }
    
     body{
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 1em;
        background-color:#fff;
        color:#000;
        margin:0; 
        padding: 0;
      height: 100%;
        }
    
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    
    ol, ul, li {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* headings */
    h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    padding: 0;
    margin: 0;
    font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
    }
    
    h1 {
    color: #FFF;
    font-size: 1.6em;
    text-align:left;
    border: 0;
    margin-bottom: 0px;
    }
    
    h2 {
    font-size: 1.2em;
    margin-bottom: 12px;
    }
    
    /* general fonts */
    .grey {
    color: #888;
    font-size: .9em;
    line-height: 1.2em;
    margin: 0 0 10px 0;
    }
    
    /* links */
    a {
    color: #26b1de;
    text-decoration: none;
    }
    
    a:hover { 
    color: #333;
    text-decoration: underline;
    }
    
    /* head */
    header {
        width: 100%;
        background: #28b9e8;
        color: #FFF;
        font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
        overflow: hidden;
            margin: 0 0 30px 0;
    }
    
    header p {
        font-size: .8em;
        padding: 0;
        margin: 0;
    }
    
    #main-contain {
        width: 100%;
    }
    
    #head-in {
        width: 90%;
        margin: 0 auto;
    }
    
    #head-left {
        margin: 20px 0 18px 0;
        float: left;
        display: inline-block
    }
    
    /* nav */
    nav {
        background: #555;
        width: 100%;
        border-top: #c1c1c1 1px solid;
        overflow: hidden;
        padding-top: 1px;
        margin: 0;
        overflow: hidden;
    }
    
    #nav-in {
        width: 90%;
        margin: 0 auto;
    padding: 0;
    }
    
    nav ul {
        float: left;
    }
    
    nav li {
        float: left;
        margin: 0;
        font-size: .7em;
        margin-right: 5px;
    }
    
    nav li a {
        padding: 6px 12px 6px 12px;
        display: inline-block;
        color: #c5c8c9;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
    }
    
    nav li a:hover {
        background: #3d3d3d;
      color: #c5c8c9;
        text-decoration: none;
        }
    
    .current_page_item a {
        background: #FFF;
        color: #333;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -moz-border-radius-topright: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        }
    
    .current_page_item a:hover {
        background: #FFF;
        color: #333;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -moz-border-radius-topright: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    
    /* content */
    .content-wrap {
        width: 88%;
        margin: 0 auto;
    
        display: block;
        background: #00ee00;
    }
    
    .content-left {
        float: left;
        display: inline-block;
        width:75%;
    }
    
    .content-right {
        float: right;
        display: inline-block;
        width: 20%;
        background: #ff0000;
    
    }
    
    .post {
    margin: 0 0 15px 0;
    }
    
    article {
    margin: 0 0 35px 0;
    }
    
    /* footer */
    footer {
    width: 100%;
    display: block;
    background: #209cc4;
    }
    Thanks!

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you need it to be 100% allthe time, why not simply use height instead of min-height??

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I don't want it to be 100% all of the time. I want a min-height set as the default and then as content is added it can grow. But still, if I could assign a height I could just as easily assign a min-height and I wouldn't be in the boat I'm in.. My problem is that if I define either a height or min-height to .content-right it does not take effect, but if I assign either to .content-wrap it does work because it is the outside container. Maybe if I move my .content-right outside it will work. I'll try that, but I still don't like that as a solution. Because I use the .content-wrap to adjust the overall content width.
    Last edited by stevenmw; 04-21-2013 at 08:53 PM.
    Thanks!

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    When you float something you take it out of the flow of the page. The way you have it coded neither content-left nor content-right are inside of content-wrap because they have been floated. To force them back inside of content-wrap add overflow:hidden to content-wrap
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by felgall View Post
    When you float something you take it out of the flow of the page. The way you have it coded neither content-left nor content-right are inside of content-wrap because they have been floated. To force them back inside of content-wrap add overflow:hidden to content-wrap
    Yes, I went back through it all and saw I forgot to add the overflow: hidden. In the end I took a much different approach to get what I wanted. In a way it is a lot simpler, but no full proof. But I'm getting there.

    Normally I define the overflow and box sizing when I first start my css, but this time I forgot. I also forgot a few display: block / inline-block

    Thanks!!
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •