[bateman]

Hi gang, im having this really annoying problem with this site i am creating. It must be fluid and on re-sizing the window the footer bar (which should take up the entire width of the page) for some reason a margin appears on the right when the window shrinks to a certain size. The css for footer is this:

#footer {
	background-color: #f6f6f6;
	margin-top: 50px;
	height: 320px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-color: #2f6c99;
	font-size: 12px;
	font-family: Helvetica;

}

There is a box-container in the footer which contains 3 divs - the containers code is this:

#box-container {
	width: 60%;
	border: 1px solid;
	border-color: #F03;
	margin-left: auto;
	margin-right: auto;
	min-width: 1000px;
	max-width: 1000px;
	overflow: hidden;
	position: relative;
}

I have set the min-width as 1000px as this is the min size for the 3 divs to align correctly. I have attached an image which shows the footer with border with the margin problem on the right - it should spread across the entire page.

Any advise of help would be much appreciated

Thanks,

Screen-grab: http://i47.tinypic.com/200pdhc.jpg

[FerretHolmes]

I think what may be happening is that you set the container's width to 60% and the min and max width to 1000px. So once you get down to a low enough resolution the 60% attribute is overriding the min-max width. Try setting the width to 100% while retaining your min-max width. This is just a stab in the dark since I can't test out your full code.

[andrewsw]

As noted, it is difficult to tell from the limited code shown, but I would first use:

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-width: 100%; /* not always necessary */
        }

[bateman]

I've tried both the above methods and have had no luck. What other code do you need to see? For the copyright section of the website (below the footer) i have used the following code and here is the body code:

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 100%;
	/*min-width:10px;
	max-width:1024px;*/
	background-image: url(../images/sam.gif);
}

figure {
	background-image: url(../images/exp.jpg);
	height: 75px;
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	font-size: 10px;
	font-family: Helvetica;
	margin-top: 30px;
	min-width: 820px;
	max-width: 1100px;
}

[andrewsw]

We need to see some of the relevant HTML.

[FerretHolmes]

I checked into what I recommended and it turns out that your code is correct regarding the liquid width. Just for reference in case somebody reading wants to know how's or why's, if you set the width and min-width/max-width property to the same element, the smallest unit will override the other.

#example {
  width: 60px;
  min-width: 100px;
}

In the example, 60px will be the width. The workaround is to do what OP did and use separate measuring units. That way the element will either be 60% of the parent element, or 1000px whichever is smallest.

#example2 {
  width: 60%;
  min-width: 1000px;
}