Info block not expanding vertically

HTML & CSS
1

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

to expand your bg image you need to add overflow:auto and increase width to remove horizontal scroll that may apear after adding overflow


#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

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.


[B]#vis[/B] {
    width: 100%;
    [COLOR=Red]/*height:100%;*/[/COLOR]
    [COLOR=Blue]overflow:hidden;/*contain floats*/[/COLOR]
    margin-top: 0px;
    background: url(../images/cbg.jpg) no-repeat;
}
4

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.

[B]#vis [/B]{
    width: 100%;
    [COLOR=Red]/*height:100%;*/[/COLOR]
    margin-top: 0;
    [COLOR=Blue]background: url(../images/cbg.jpg) no-repeat 50% 0;[/COLOR]
}

[B]#info [/B]{
    width: 878px;
    min-height: 515px;
    [COLOR=Red]/*height:100%;*/[/COLOR]
   [COLOR=Blue] overflow:hidden;/*contain floats*/[/COLOR]
   [COLOR=Blue] background: url(../images/infobg.png) repeat-y;[/COLOR]
   [COLOR=Blue] margin:auto;[/COLOR]
}
5

Great thanks so much guys!!

Still amazed at how quickly problems get solved here at sitepoint

6

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

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. :wink:

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

Sorry and thank you!

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