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 4 of 4

Thread: CSS Question

  1. #1
    Regular Coder Freon22's Avatar
    Join Date
    May 2005
    Location
    USA
    Posts
    287
    Thanks
    3
    Thanked 5 Times in 5 Posts

    CSS Question

    I have a problem with my layout. What I am using is some nested divs so it looks like I have rounded borders. The problem is if I set the height of each div to 100% then as the content expands it will just layer over the div. If I don't use a height in the divs then it expands like it should as content is added. But if there is no or little content then the divs shrinks down to the content height. I want it all the divs to stay at a min-height: 100%; Any ideas on how to do this?

    HTML
    Code:
    <div class="MainContentBorder">
        <div class="ContentWraper">
           <div class="MainContentArea">
                        
                           
                            
           </div>
        </div>
     </div>
    CSS
    Code:
    .MainContentBorder {
         background-color: #a3692b;
         padding: 6px;
         /*min-height: 100%;*/
    }
    .ContentWraper {
         background-color: #000000;
         background-image: url(images/MainBackground.gif);
         /*height: 100%;*/
    }
    .MainContentArea {              
         /*height: 100%;*/ 
         text-align: left;
         padding: 10px;
         margin: 0px;     
    }
    I was wondering why frisbees got bigger as they got closer, then it hit me.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    .MainContentArea{
    /* for FF,Safari,Chrome etc */
    height:auto !important; 
    min-height:200px;
    /* for stupid IE*/
    height:200px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Freon22 (01-12-2010)

  • #3
    Regular Coder Freon22's Avatar
    Join Date
    May 2005
    Location
    USA
    Posts
    287
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Your the man Thanks a ton. I have been messing with this for a few days. One question I understand all you have but one this "!important"

    Anyway Thanks again!
    I was wondering why frisbees got bigger as they got closer, then it hit me.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    !important is to say all standard browsers that "this is very important, so you shouldn't override the value of this particular property when you encounter a different one"
    Refer http://www.w3.org/TR/CSS21/cascade.html#important-rules
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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