Morning all

 

Hope your weekend is going well.

 

I've got a bit of a problem, i'm setting up a fluid 3 column layout. It looks absolutely fine in a 1680x1050 resolution, everything moulds together well. However, when the browser is resized down to 1024x768 i'm experiencing quite a large gap in between the content column and the first sidebar.

 

Could anyone help shed some light on this? Fluid layouts aren't really my forte as i've never really had to do them before. I'm assuming it's down to the percentages causing the problem.

 

Linky: Test Environment

 

Ta muchly.

You've mixed % width and fixed widths in px and that often causes problems.

 

If you reduce the window size to 800px and below the #sidebar2 and #sidebar3 div go down to a line below #content, first they are side by side and then one above the other.

 

#content is width: 53% but #sidebar2 and #sidebar3 are 200px wide so eventually there isn't enough room as the window gets narrower.

 

Your top #sidebar div isn't next #content, it's actually next #wrapper, but as it's position: fixed it's out of the normal flow so it doesn't relate to the width of #wrapper. #sidebar has a width: 18% and a left margin of 62% which I think means 62% of the window width. The #mainContainer is width: 80% and the #wrapper is width: 75% of that 80%, so the spacing between the #wrapper and the fixed #sidebar is a little difficult to calculate.

 

I suggest that you code every div in % and it may be better to code #sidebar with top: 10px; right: 10%; instead of the left margin, but the space between it and #wrapper will still seem to vary when you are using % widths. (#mainContainer is width: 80%; margin: auto; which means the left and right margins are 10% so you could make #sidebar right: 10%).

 

In order to do the width calculations properly, remember to use % for side margins and side padding to arrive at the total % width of a div. It's OK to have all widths in % and all heights in px.

 

An additional complication is that borders cannot be sized in % so you need to allow a few % in your calculations for space for side borders.

 

The following CSS makes your page better, but I don't think I would code it as you have.

 

#wrapper is 75% of mainContainer's 80% = 60% of window width and 10% from the left because of #mainContent's padding = 70% total. Make #sidebar 29% total width to allow for side borders including 2*1% side padding and right: 10% totalling 29%, ie width: 17%; padding: 10px 1%; right: 10%; (#sidebar is position: fixed so it relates to the window not mainContainer. #sidebar has to miss #wrapper which is width: 60%; and 10% from the left because of #mainContent's padding).

 

Lower down, #content is width: 53%; and side padding 2*1% = 55% plus side borders leaving less than 45% for the two sidebars. Make them 43% total ie width: 41%; and 2*1% side padding = 43% plus their own side borders.

 

This works down to a very small window width. Note that 1% for side padding is nearly the same as 10px in a 1024px wide window, so it looks much the same with padding increasing in proportion to div widths in larger resolutions.

 

#mainContainer { background: yellow;
	width: 80%;
	margin: 0 auto;
	padding: 10px 1%;/*10px;*/
	text-align: left;
	font-size: 1.1em;
	}

#wrapper { background: pink;
	width: 75%;
	float: left;
	}

#header { background: #ccc;
	padding: 10px;
	border: 1px solid #ddd;
	margin-bottom: 10px;
	}

#content { background: lime;
	float:left;
	width: 53%;
	padding: 10px 1%;/*10px;*/
	border: 1px solid #ddd;
	margin-bottom: 10px;
	}

#sidebar { background: #eee;
	position: fixed; top: 10px; right: 10%;
	/*margin: 0 0 0 62%;*/
	width: 17%;/*18%;*/
	padding: 10px 1%;/*10px;*/
	border: 1px solid #ddd;
	}

	#sidebar2 { background: skyblue;
		float: right;
		width: 41%;/*200px;*/
		padding: 10px 1%;/*10px;*/
		border: 1px solid #ddd;
		}

		#sidebar3 { background: azure;
			float: right;
			width: 41%;/*200px;*/
			padding: 10px 1%;/*10px;*/
			border: 1px solid #ddd;
			}

#footer { background: #eee;
	padding: 10px;
	border: 1px solid #ddd;
	clear: both;
	}