Hey all.

http://entertainment-cms.com/help.htm

As you can see, I have 150px menu on Left and Right.
So I put a margin on the "content" div left and right of 160px.

The main content section as you can see is STRETCHING well over to the right hand side.
Where am i going wrong?

Im a css noob, but i don't think i did a bad job of the design.

Thanks in Advance.

http://entertainment-cms.com/help2.htm

I think i fixed it, looks good to me in FIREFOX.
****.. IE shows the content at the bottom instead.

just float drop, give #content a little less width, 96 -98% should be ok. and set it to centre.

OR take a look at the CSS for;
http://www.candsdesign.co.uk/page-te...uid/layout.asp
http://www.candsdesign.co.uk/page-te...r-2/layout.asp

Done quite a while ago and my CSS techniques have improved a bit since then

Thanks for replying moderator Chris.
I added the following "width: 96%;" to the content div. It then overlaps, it goes more than 100% of the page width, its very strange.

try it with smaller values.

or start at 80% and increase it each time until it drops again.

Your site is a lot happier without all of the width: 100%s. Divs that aren't floated will automatically stretch to fill the screen. When you specify width:100% for the centre div, the browser makes it 100% of the parent element's width (= window width here) + the margins (= bigger than window width & a nasty overlap).

Creating a 3 column layout with fluid centre is pretty simple - float columns left & right & use the centre's margin to get its width to 100% - other column widths. (As, in fact, you have almost done already.)

    <style type="text/css">
		.Left { float: left; width: 150px; }
		
		.Right { float: right; width: 150px; }
		
		.Middle { margin: 0 175px; }
	</style>

...

	<div class="Left">
	</div>
	<div class="Right">
	</div>
	<div class="Middle">
	</div>

This isn't ideal for screen readers or (probably) Google though, as the important stuff is at the bottom of the page. I think there are ways round this, though. Ooh, here you go. Lovely

PS I think you meant text-tranform: uppercase.

meloncholy, Thanks so much.
I have removed every 100% and it is not working like a charm! ..
Which is strange to me, how it know to be 100%! ..

I also fixed the uppercase, lmao. Ill read article to see if i can get content up to top. Otherwise, I will remove right menu when google visits via PHP.

=========
I followed the artcle posted, looks a bit buggy on FireFox, wont work at all on IE. The css for container, left, center, right are the same.. Guess ill keep tweeking, see how it goes.


THANKS!

For IE you need a hack to fix it's problems, which they alluded to in the article.

You might also find this useful: http://www.positioniseverything.net/articles/jello.html