Results 1 to 3 of 3

Thread: css height help

  1. #1
    Join Date
    May 2012
    Posts
    217
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default css height help

    Hi

    I have been stuck for a while on this issue

    I have a main div with two divs inside it and am trying to get the main and inside divs to expand to fit the content in but am having no joy

    for example the home page does not have as much content as my sub page

    I have pasted the HTML and CSS below

    Code:
    <div id="container-pages">
       
       <div class="top-point">
       <img class="top-point" src="images/top-point-1.png" alt="" title="">
       </div>
    
    <div class="bottom-point">
       <img class="bottom-point" src="images/bottom-point-.png" alt="" title="">
       </div>
    
    </div>
    CSS

    Code:
    #container-pages {
    background: #598288;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    height: 835px;
    width: 957px;
    margin: 150px 21px 0 23px;
    }
    
    .top-point {
    margin: -92px 0 0 200px;
    }
    
    img.top-point {
    margin: -71.6px 0 0 182px;
    position: absolute;
    height: 80px;
    }
     
    .bottom-point {
    margin: 460px 0 0 200px;
    }
    
    img.bottom-point {
    margin: 54.6px 0 0 -440px;
    position: absolute;
    height: 80px;
    }
    Thank you in advance

    Kind regards

    Ian

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Its hard to visualise what you're asking without examples. You refer to "content", but there is no content to illustrate any behaviour. Also, "having no joy" is unfortunately not descriptive enough - we need to see examples of what is actually happening, and for you to clearly describe what you want or expect to happen instead.

    At the moment we cannot clearly see in what div the content is placed (apart from 2 images - is this the only content?).

    If you mean that you want the heights of these 3 divs to increase so that they accommodate whatever else is put inside them, while still falling back to a minimum height, you can use min-height instead of height in your CSS.

    Looking at the CSS, I'd be tempted to say that just changing height:835px; to min-height:835px; is what you need, but if this isn't the case, please provide links to the actual pages and try to explain your requirements in more detail.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    May 2012
    Posts
    217
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi

    Thank you for the reply

    I have solved it now by adding min-height to the container-pages div

Similar Threads

  1. Replies: 0
    Last Post: 08-11-2009, 06:19 AM
  2. Replies: 2
    Last Post: 11-04-2007, 06:21 PM
  3. Replies: 0
    Last Post: 08-06-2007, 06:12 AM
  4. Replies: 2
    Last Post: 06-01-2007, 05:49 AM
  5. Setting a division's height based on Screen Height.
    By xstayxstrongx in forum JavaScript
    Replies: 1
    Last Post: 01-27-2006, 04:15 AM

Bookmarks

Posting Permissions

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