Move my box to the right

Hello,

My page : http://dev.leadcreation.com.au/home/about/

I would like to move my box to the right in my footer.

Look at the screenshot below :

Thank you !

Just increase the value in red below:


#supplementary #second {
  box-shadow: 0 -1px 5px 1px #3898D4;
  height: 327px;
  margin: 0 0 0 [COLOR="#FF0000"]55[/COLOR]px;
  overflow: hidden;
  width: 510px;
}

I have tested but it’s not working with :

#supplementary #second {
  box-shadow: 0 -1px 5px 1px #3898D4;
  height: 327px;
  margin: 0 0 0 [COLOR="#FF0000"]65px;[/COLOR]
  overflow: hidden;
  width: 510px;
}

That will move it by 10px. It still says 55px online, though.

Yes because I have modified the value with Firebug. Not directly in the css.

I have tested with 58,60,65,70px but the footer burst.

Test it to know what I mean.

Removing that 55px will bring the other boxes over from the left and narrow the gap that way. However, I’m seeing other problems with your layout. In Firefox7, Chromium and Epiphany on Linux, the entire footer area is way over to the right, causing a horizontal scroll-bar.

Hi,

You have a lot of weird stuff going in there especially the min-width 1900px !!!

Add these styles to get it back to being more normal:


#supplementary {
	width:1100px;
	margin:auto
}
#colophon {
	min-width:1100px;
	margin:-280px auto 0
}
#supplementary #second { margin-left:0; }
#supplementary { padding:1.625em 0 }
#access {
	width:auto;
	right:-200px;
}
#supplementary #third {
	float:left;
	margin:0 0 0 10px;
}
#triangle2 {
	position:static;
	margin:-35px 0 0 170px;
}


You can test more easily with css terminal and just paste the code above in there to see the affect more easily than using Firebug:

Ok thank you, it’s good now!

My last problem is when I resize the browser window : my footer burst

I have tested with “min-width” but it’s the same…

How I can fix that ?

At the bottom of style.css you have media queries set up to change the whole page layout for smaller screens so you need to add rules there to create a variation of the footer that will fit into that smaller space.

The media queries start here:



@media (max-width: 800px) {
	/* Simplify the basic layout */
	#main #content {
		margin: 0 7.6%;
		width: auto;
	}

In that media query you should be developing your small screen layout which is usually a narrow simplified version of the site.

I have tested with :

@media (max-width: 100px) {

and it’s good now !

Thank you very much Paul O’B you are the best !