problem with simple css layout

ianb posted this at 18:13 — 22nd February 2009.

They have: 1 posts

Joined: Feb 2009

I have a fairly simple looking style sheet that gives me a 3 column page with fixed width left and right columns in which I have put an image each side and a fluid center column.

The only problem that I have is that right hand image is only partly shown and the browser window always opens up with the bottom scroll bar indicating that there is more content to the right ie the missing part of the image.

I would be really grateful if somebody could point me in the right direction with this please

Example can be seen at http://www.havenswift.co.uk/ian.html

Thanks
Ian

decibel.places posted this at 20:11 — 22nd February 2009.

He has: 1,494 posts

Joined: Jun 2008

Welcome to TWF Ian

try increasing padding-right to 240px
also adding overflow-x: hidden will prevent the horizontal scrolling

tested in Firefox - did not check in other browsers

body {
	margin: 0;
	padding-left: 200px;    /* LC fullwidth */
	padding-right: 200px;   /* RC fullwidth + CC padding */
	min-width: 220px;       /* LC fullwidth + CC padding */
}

body {
	margin: 0;
	padding-left: 200px;    /* LC fullwidth */
	padding-right: 240px;   /* RC fullwidth + CC padding */
	min-width: 220px;       /* LC fullwidth + CC padding */
overflow-x: hidden;
}

webwiz posted this at 00:29 — 23rd February 2009.

He has: 629 posts

Joined: May 2007

Your #center DIV has width: 100% plus left and right padding of 20px, thus it is always wider than the window. Delete the "width" declaration and you are good to go. (DIVs are block elements, and expand to fill horizontal space automatically.)

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

decibel.places posted this at 05:22 — 23rd February 2009.

He has: 1,494 posts

Joined: Jun 2008

webwiz wrote:

Your #center DIV has width: 100% plus left and right padding of 20px, thus it is always wider than the window.

Good point, David!

If you remove the #center width, remember to reset your padding values to the originals...