SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Info block not expanding vertically

    Hello,

    First you will see the block with the screws around it, for some reason it is not expanding with my content. Which then cuts off the full background picture

    Link to page in question here

    http://www.thebigtapin.com/dev/breweries.php

    background picture so you can see the full picture

    http://www.thebigtapin.com/dev/images/cbg.jpg

    Thanks!

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    to expand your bg image you need to add overflow:auto and increase width to remove horizontal scroll that may apear after adding overflow

    Code:
    #info {
    	width: 882px;
    	min-height: 515px;
    	height:100%;
    	background-image: url(../images/infobg.png);
    	background-repeat: repeat-y;
    	background-position: left-top;
    	margin-left:auto;
    	margin-right:auto;
    	overflow:auto;
    }

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Remove the height:100% from your #vis div and add overflow:hidden to contain floats and allow it to expand. Height 100% is only the height of the viewport at any given instance and it will never expand past that. If you reduce your browser window to 400px tall that is 100% height at that instance.
    Code:
    #vis {
        width: 100%;
        /*height:100%;*/
        overflow:hidden;/*contain floats*/
        margin-top: 0px;
        background: url(../images/cbg.jpg) no-repeat;
    }

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Let's move the overflow down to the info div since it contains the floated state divs. Likewise remove the 100% height from there too.

    Code:
    #vis {
        width: 100%;
        /*height:100%;*/
        margin-top: 0;
        background: url(../images/cbg.jpg) no-repeat 50% 0;
    }
    
    #info {
        width: 878px;
        min-height: 515px;
        /*height:100%;*/
        overflow:hidden;/*contain floats*/
        background: url(../images/infobg.png) repeat-y;
        margin:auto;
    }

  5. #5
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks so much guys!!

    Still amazed at how quickly problems get solved here at sitepoint

  6. #6
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone know why i am getting that large brown gap at the bottom of my page? I added a margin to the bottom of #infobot but it doesn't seem to be expanding correctly?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Anyone know why i am getting that large brown gap at the bottom of my page?
    Yes, that is the bottom margin that you knowingly added to your #infobot div.

    but it doesn't seem to be expanding correctly?
    That is because you have a defined height set on it. Make it min-height if you want it to expand.


    Code:
    #infobot {
        width: 878px;
        /*height: 20px;*/
        min-height: 20px;
        background-image: url(../images/infobot.png);
        background-repeat: no-repeat;
        background-position: left top;
        margin-left:auto;
        margin-right:auto;
        /*margin-bottom:45px;*/
    }

  8. #8
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry and thank you!

    Still getting used to some things with CSS (html table convert)


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
  •