5 Replies - 613 Views - Last Post: 01 February 2013 - 04:22 PM

#1 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

HTML CSS Footer Fluid Re-size problem - help!

Posted 01 February 2013 - 07:29 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: HTML CSS Footer Fluid Re-size problem - help!

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: HTML CSS Footer Fluid Re-size problem - help!

Posted 01 February 2013 - 01:02 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3491
  • View blog
  • Posts: 11,910
  • Joined: 12-December 12

Re: HTML CSS Footer Fluid Re-size problem - help!

Posted 01 February 2013 - 01:17 PM

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 */
        }

Was This Post Helpful? 0
  • +
  • -

#4 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

Re: HTML CSS Footer Fluid Re-size problem - help!

Posted 01 February 2013 - 03:00 PM

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;
}

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3491
  • View blog
  • Posts: 11,910
  • Joined: 12-December 12

Re: HTML CSS Footer Fluid Re-size problem - help!

Posted 01 February 2013 - 03:10 PM

We need to see some of the relevant HTML.
Was This Post Helpful? 0
  • +
  • -

#6 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: HTML CSS Footer Fluid Re-size problem - help!

Posted 01 February 2013 - 04:22 PM

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;
}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1