Hey guys hope you can provide me with some advice!

 

Im in the process of building a site, currently working on tweaking the CSS for FF. I have come into a few problems that I can not seem to solve myself yet.

 

 

On my 1680x1050 monitor in FF, for the main page I get the above. All seems fine.

When I change to my 1024x768 monitor I get the following:

 

 

the dynamic div (room seems to overflow the parent container and there seems to be a white gap between the container and footer. I wanted it to appear the same as the first screen shot.

 

 

On a different page, using the exact same div layout and stylesheet with just different contents inside the dynamic div I get the above. A bigger white gap between the container and the footer. Also the dynamic div (which is supposed to be inside the container div) is again overflowing.

 

Better overview:

 

Here is the relative CSS:

 

html,body {

text-align: center;
background: #ffffff;
background-image: url(../images/bkgrnd.png);
background-repeat: repeat-x;
}

#container {

text-align: left;
margin: auto;
width: 763px;
min-height: 100%;

}

#lang-nav {

width: 763px;
height: 35px;
background-image: url(../images/lang-nav.png);
background-repeat: no-repeat;

}


#header-img {

width: 763px;
height: 158px;
background-image: url(../images/header-img.png);
background-repeat: no-repeat;

}

h1 {

float: right;
font-family: arial, tahoma, verdana, arial, sans-serif;
color: #ffffff;
font-size: 12px;
margin-right: 20px;
padding-top: 2px;
}

h1 a {

 text-decoration: none;
 font-family: 	font-family: arial, tahoma, verdana, arial, sans-serif;
color: #ffffff;
font-size: 12px;

}



#body-con {

width: 763px;
height: 100%;
background-image: url(../images/body-con.png);
background-repeat: repeat-y;
   min-height:100%

}

#menu-div {

float: left;
width: 175px;
height: 400px;

}

#dynamic-con {

float: right;
width: 575px;
padding-bottom: 20px;
}


#footer {
clear:both;
width: 763px;
height: 20px;
background-image: url(../images/footer.png);
background-repeat: no-repeat;

}

h3 {


height: 10px;
font-family: arial, tahoma, verdana, arial, sans-serif;
color: #c0c0c0;
font-size: 10px;
padding-top: 5px;
padding-left: 20px;

}

#well-txt {

font-family: tahoma, verdana, arial, sans-serif;
font-size: 11px;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 30px;

}

#well-txt-header {

font-family: georgia, arial, tahoma, verdana, arial, sans-serif;
font-size: 18px;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 0px;

}

 

On the html files I do have an empty div between the main container and footer with a clear:both.

 

If there's any more information you need please ask. I apologise if it seems abstract. I will be happy to give out the live url in PM.

 

Kind Regards.

Hi there,

If you're still having problems with this, feel free to pm me the url.

Hi there,

If you're still having problems with this, feel free to pm me the url.

 

Just sent you a PM! I have solved the issue of why the div seemed to get overflown in lower resolutions. Just had to set the height to 130% instead of 100%. Although it now has a large gap between content and footer in higher res' its fine in lower ones. Not ideal but working good enough. The problem I still have is with the background image not repeating like shown in the 3rd screen shot. Any input on that would be fantastic!

 

Edit: Because that div is now over a 100%, does background-image: url(../images/body-con.png); only go up to the 100%?

Solved it. Just needed to add height:130% to the body {} aswell.

I've just sent you a pm with some revised code.

I've just sent you a pm with some revised code.

 

Would like to give a big thanks to ElanMan for giving some solid help and advice to a forum new comer!