Solved

CSS Div stretching issue (min-height)?

Posted on 2009-04-02
10
1,074 Views
Last Modified: 2012-05-06
The page in question is here:
http://stage2.daileydev.com/

The main CSS mile is at:
http://stage2.daileydev.com/css/all.css

The "container" div contains a 1 pixel background which creates the grey divider line between the side navigation and the content section.

The issue is that I need that container to stretch to meet the bottom of the browser window so that it touches the outside box, even when the content is not long enough to make the div stretch.  I tried experimenting with the min-height: 100% element on various tags, but I wasn't able to get it to work.  Any help would be appreciated.

Ideas?
0
Comment
Question by:OaktownBill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 14

Expert Comment

by:amar31282
ID: 24053550
HI OaktownBill,

The where are you facing the issue and in which browser. i can't find any issues with the height the container is expanding and the background line is also resizing with that.

Please be little more specific

Regards,
Amarjit
0
 

Author Comment

by:OaktownBill
ID: 24053898
Hi Amarjit,

I'm seeing it on IE7 and Firefox 3 on Windows.  It's not visible unless the browser window is big enough or the screen resolution is high enough it seems.

Bill
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24054038
try this
#page-box {all.css (line 65)
background:transparent url(../images/bg-body.gif) repeat-y scroll 0 0;
height:100%;
margin:0 auto;
min-height:100%;
width:872px;
}
#main {all.css (line 156)
height:inherit;
padding:32px 11px 0 12px;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:OaktownBill
ID: 24054088
Thanks for working on this.  Unfortunately, the issue is still there with the updated code.  Very perplexing..

Bill
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24054150
i am not getting exactly what you want can you please explain your needs.

When do you want the div to stretch
0
 

Author Comment

by:OaktownBill
ID: 24054245
Here is a sceen shot showing what I am seeing:

http://stage2.daileydev.com/line_issue.gif

The divider line is part of the container DIV and it seems to end after the footer.  What I need is for the container to reach the bottom of the browser window.
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24054354
how are you increasing the height and making the empty space.

It is working fine at my end in IE7, IE8, FF3
heightff.png
height.png
0
 

Accepted Solution

by:
OaktownBill earned 0 total points
ID: 24055297
I was able to get this to work by adding the divider line to the background image.  Thanks for your assistance.
0
 

Author Comment

by:OaktownBill
ID: 24055302
Solution found.
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24056547
so it worked at your end or not
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question