Page Layout Destroyed If Text Rolls Too Far Down The Page? (div Layout)

[Morgan]

Hi guys,I am trying to make a layout using nothing but <div> tags (no tables) to practice up on my div skills.. however I am running into some trouble.The main layout of the page is a top header w/ a few different colored line breaks that spans the entire width (100%) of the page, then a main content window in the middle below with a left-side and right-side "border" per say, floated left and right as they should be. They are set to height: 100%While testing the page, I decided to flood the main section with line breaks to see what would happen once the layout was pushed down off the page... it destroyed the bottom of the layout entirely, and I am not quite sure why.Here is an example of what the page should look like (before line-breaking too far):http://www.tmcustomcomputers.com Notice how the bottom section (the black bar) only encompasses the main content div, and not the left and right side divs.. This is what I was trying to accomplish, however as you can see its still not ALL the way forced to the bottom, which is where it is supposed to be (that is where copyright info, contact, quick nav, etc will go)However, there is an even more pressing problem, as you can see here:http://www.tmcustomcomputers.com/index2.htmlWhen forcing extra line breaks to push the page down, it doesn't keep its form at all. The left and right side bars stop displaying, even though they are set to a height of 100%, and the bottom bar (black bar) breaks free of the main div and manages to span across the ENTIRE page... On top of this, the text that is overflowing the main content div gets sent all the way to the left side.The entire HTML Code holds the design in its CSS, so if anyone has a few minutes to take a look through it and possibly tell me what it is I'm doing wrong or have to change, I'd really appreciate it!Thanks

[jeffman]

You have to be careful setting anything (except a table) to 100%. It means 100% of the window width or height. If you scroll your page to the first NEW WEBSITE COMING SOON!, you'll see that the trouble begins at the exact bottom of the window, 100% down.In other words, you're breaking out of your container. The easiest solution should be to remove the height declaration.What did you hope to accomplish with height: 100%, anyway? Someone might be able to suggest better way to accomplish that.

[Morgan]

Idk it's habbit I guess haha, from my days of table coding. So if I remove the 100% height, it should continue to display properly?

[jeffman]

Idk it's habbit I guess haha, from my days of table coding. So if I remove the 100% height, it should continue to display properly?

I hope so! Try it.

[Morgan]

Thanks can't try it until after work, but I'll let you know how it goes

[SillyBilly]

Thanks can't try it until after work, but I'll let you know how it goes

I centered the text in the centre and that kept it from moving to the left margin after the left div. I also changed the centre to a tag that indents the left margin for the centre part of the display. this also keeps the text between the left and right divs.You can see the results At My Website

[Morgan]

I centered the text in the centre and that kept it from moving to the left margin after the left div. I also changed the centre to a tag that indents the left margin for the centre part of the display. this also keeps the text between the left and right divs.You can see the results At My Website

The result of my page is to have the side divs continue to scroll with the entire length of the page, and not be cut off or end at all (they are bounding boxes for the purpose of the entire design)When I remove the height: 100% declaration, the side-divs don't expand at all with the length of the page, ruining the layout even more:http://www.tmcustomcomputers.comAny more ideas?

[Jerry62704]

Hi guys,I am trying to make a layout using nothing but <div> tags (no tables) to practice up on my div skills.. however I am running into some trouble.Thanks

Your page is missing some real important stuff. I added it in, you may want it to be different. I also formatted the code (pretty print) so it would be easier to work with. You have a "main right", but no div for the stuff in the middle nor anything for a "main left".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">* {	margin: 0;	padding: 0;	border: none;}#mainwrapper {	margin: 0 auto;}.uppernav {	background-color: #333333; 	height: 20px; 	margin: 0 auto;}.header {	background-color: #3d3d3d; 	height:96px; 	margin: 0 auto;}.break {	background-color: #585c5f; 	height:1px; 	margin: 0 auto;}.break2 {	background-color: #ffffff; 	height:1px; 	margin: 0 auto;}.break3 {	background-color: #c9cfd3; 	height:1px; 	margin: 0 auto;}.break4 {	background-color: #0078ff; 	height:3px; width:263px; margin: 0 auto;}.undermainnav {background-color: #c9cfd3; height: 19px; marin: 0 auto;}.mainbreak {background-color: #797f83;height: 7px; margin: 0 auto;}.leftmain {background-color: #f4f4f4;width: 144px; height: 100%; float: left;}.main {background-color: #ffffff; margin: 0 auto;}.rightmain {background-color: #f4f4f4;width: 144px; height: 100%; float: right;}.mainright {background-color: #ffffff;width: 277px; float: right;}.mainrightintop {background-color: #797f83; width:263px; height: 19px; margin: 0 auto;margin-top:0.5EM}.mainrightinside {background-color: #ffffff; width:263px;margin: 0 auto;}.bottom {background-color: #000000;height: 100px;}.mainbreak2 {background-color: #797f83;height: 7px; margin: 0 auto;}.head1 {margin-left: 4EM; font-size: 36px;font-weight: bold;color: white; font-family: Arial, Sans-Serif, Times New Roman;}.head2 {margin-left: 7EM; font-size: 24px;font-weight: bold;color: white; font-family: Arial, Sans-Serif, Times New Roman;}.head3 {font-size: 18px;}.blue {color: #0078ff;}</style></head><body><div id="mainwrapper">	<div class="uppernav">	</div>	<div class="break"> </div>	<div class="header">		<span class="head1">			<span class="blue">Tyler Morgan</span>			Custom Computers</span><br />			<span class="head2">				<span class="blue">TM</span>				CustomComputers<span class="blue head3">.com			</span>		</span>	</div>	<div class="undermainnav">	</div>	<div class="break2"> </div>	<div class="mainbreak">	</div>	<div class="break3"> </div>	<div class="break2"> </div>	<div class="leftmain">		 	</div>	<div class="rightmain">		 	</div>	<div class="main">		<div class="mainright">			<div class="mainrightintop">				Test			</div>			<div class="break4"> </div>			<div class="mainrightinside">				This is a Test of the Information<br />				Information Break			</div>			<div class="mainrightintop">				Test			</div>			<div class="break4"> </div>			<div class="mainrightinside">				This is a Test of the Information<br />				More Information Break			</div>			<div class="mainrightintop">				Test			</div>			<div class="break4"> </div>			<div class="mainrightinside">				This is a Test of the Information<br />				Flood Test<br />				Flood Test<br />				Flood Test<br />				Flood Test<br />				Flood Test<br />			</div>		</div> <!-- main right -->		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />		NEW WEBSITE COMING SOON!<br />	</div>	<div class="mainbreak2"> </div>	<div class="bottom"> </div></div>

[Morgan]

Hi again,I now tried 3 separate ways/attempts to have the main content stay within a div and not overflow over to the right side of the main where the Information Bars are... All 3 have failed and broken my design (although, I did manage to solve my ORIGINAL design problem)Can anyone help me figure out whats going on here?Here are the 3 exampleshttp://www.tmcustomcomputers.com/index3.htmlhttp://www.tmcustomcomputers.com/index4.htmlhttp://www.tmcustomcomputers.com/index5.htmlThanks again for all the help!

[Jerry62704]

Hi again,I now tried 3 separate ways/attempts to have the main content stay within a div and not overflow over to the right side of the main where the Information Bars are... All 3 have failed and broken my design (although, I did manage to solve my ORIGINAL design problem)Can anyone help me figure out whats going on here?Here are the 3 exampleshttp://www.tmcustomcomputers.com/index3.htmlhttp://www.tmcustomcomputers.com/index4.htmlhttp://www.tmcustomcomputers.com/index5.htmlThanks again for all the help!

It may be in common (I'm just looking at the first one), but the css has errors. They are tricky because the validater fails to find them. The one that came to mind immediately is:font-family : Arial, Sans-serif, Times New Roman;which should be:font-family : Arial, "Times New Roman", sans-serif;(quotes around fonts with spaces and putting the default last.As you use this a lot, and nothing else, put it once in the "*" or the body selector for it.If you eliminate the leftmain and rightmain width the rest will line up. Were they there to center the page?The page itself is missing the bottom part. It's a wonder that anything is working on it given that.

[Morgan]

I made a new basic design of what it is I am trying to accomplish here:http://www.tmcustomcomputers.com/newtest.htmlThe left and right float divs are there for advertisements, possible future navs, etcThe top is for banner, the main is for main content (float left) and side content (float right)the bottom is for copyright info, quick nav, and all that good stuff...My main problem currently is that the black bottom bar in the main section won't scroll with the page when the other divs are extended downwardExamples:http://www.tmcustomcomputers.com/newtest2.htmlhttp://www.tmcustomcomputers.com/newtest3.htmlI THINK I wrote this one a bit better than my original, as a basic design that is... but I can't figure out how to get the bottom black bar to scroll downward with the page if the side content OR the main content is extended downward (it just gets hidden behind them instead)The idea is to have the black bar be the same width as the main content area of the page itself (not the whole width of the screen), and to remain at the very bottom at all times, whether it is pushed down by content in the MAIN CONTENT DIV or the SIDE CONTENT DIV. Also, obviously I'd want the MAIN CONTENT DIV to continue to move downwards with a white background if the SIDE CONTENT DIV is extended downward, and vice versa.I hope I'm making sense? Please let me know if I'm not, I hope this new layout example will help to clear up what Im trying to doObviously, the colors in the layout are just for visual identification purposes.Thanks again for your help!

[Jerry62704]

I made a new basic design of what it is I am trying to accomplish here:http://www.tmcustomcomputers.com/newtest.htmlThe left and right float divs are there for advertisements, possible future navs, etcThe top is for banner, the main is for main content (float left) and side content (float right)the bottom is for copyright info, quick nav, and all that good stuff...My main problem currently is that the black bottom bar in the main section won't scroll with the page when the other divs are extended downwardExamples:http://www.tmcustomcomputers.com/newtest2.html

#2 is also missing part of the page. The bottom part. Look at your source code and the bottom. Who knows how much is missing and how it is affecting what is still there.Just checked and #3 is also missing the bottom of the page.

[Morgan]

what do you mean missing the bottom?The black bar? it shows on my screen..

[Jerry62704]

what do you mean missing the bottom?The black bar? it shows on my screen..

When you reply, use the reply button under the post, not the bottom of the page. Doing the one under the post will cause your reply to outline with the message instead of outline with your own first post.What I'm talking about is every page you have is missing the bottom of them. Here is your code:

<!-- missing top stuff <DOCTYPE><html>--><head><style type="text/css">	#mainwrapper {margin: 0 auto;}	.top {margin: 0 auto; width: 100%;background-color: pink;}	.left {float: left; width: 200px;background-color: red;}	.middlemain {margin: 0 auto;width:848px; background-color: green;}	.right {float: right;width: 200px;background-color: blue;}	.mainleft {float: left;width: 577px;background-color: orange;}	.mainright {float: right;width: 271px;background-color: purple;}	.mainbottom {margin: 0 auto;width: 848px;background-color: black;}	.white {color: white;}	</style></head><body><div id="mainwrapper">	<div class="top">		TOP BANNERS HERE	</div>	<div class="left">		LEFT NAV/AD HERE	</div>	<div class="right">		<span class="white">RIGHT NAV/AD HERE</span>	</div>	<div class="middlemain">		<div class="mainleft">		MAIN CONTENT HERE		</div>			<div class="mainright">			<span class="white">SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br /></span>		</div>		<div class="mainbottom">			<span class="white">BOTTOM STUFF HERE</span>		</div>	</div></div><!-- missing bottom stuff[unknown what else is missing...]</body></html>-->

Have I cleared that up?

[Morgan]

When you reply, use the reply button under the post, not the bottom of the page. Doing the one under the post will cause your reply to outline with the message instead of outline with your own first post.What I'm talking about is every page you have is missing the bottom of them. Here is your code:

<!-- missing top stuff <DOCTYPE><html>--><head><style type="text/css">	#mainwrapper {margin: 0 auto;}	.top {margin: 0 auto; width: 100%;background-color: pink;}	.left {float: left; width: 200px;background-color: red;}	.middlemain {margin: 0 auto;width:848px; background-color: green;}	.right {float: right;width: 200px;background-color: blue;}	.mainleft {float: left;width: 577px;background-color: orange;}	.mainright {float: right;width: 271px;background-color: purple;}	.mainbottom {margin: 0 auto;width: 848px;background-color: black;}	.white {color: white;}	</style></head><body><div id="mainwrapper">	<div class="top">		TOP BANNERS HERE	</div>	<div class="left">		LEFT NAV/AD HERE	</div>	<div class="right">		<span class="white">RIGHT NAV/AD HERE</span>	</div>	<div class="middlemain">		<div class="mainleft">		MAIN CONTENT HERE		</div>			<div class="mainright">			<span class="white">SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br /></span>		</div>		<div class="mainbottom">			<span class="white">BOTTOM STUFF HERE</span>		</div>	</div></div><!-- missing bottom stuff[unknown what else is missing...]</body></html>-->

Have I cleared that up?

OH, I know that its missing the </body> and </html> and all that stuff, I wrote it quickly as a demonstration, not a final product. That shouldn't be affecting the final outcome of what I am trying to accomplish here though, those are just "validation" errors. Have I been unclear as to my problems? The black bar that is supposed to be the bottom nav of the page refuses to scroll down when the page extends (I.E., when I type stuff in the main content or side content divs), it remains static.. I need it to be pushed down when those divs move down. Does that make more sense? Please honestly let me know if I'm not making any sense... I'm just trying to get this to work. the end codes will obviously exist in my final validated product, but in the mean time I am just trying to figure out why its not doing what I want it to do.

[Jerry62704]

OH, I know that its missing the </body> and </html> and all that stuff, I wrote it quickly as a demonstration, not a final product. That shouldn't be affecting the final outcome of what I am trying to accomplish here though, those are just "validation" errors. Have I been unclear as to my problems? The black bar that is supposed to be the bottom nav of the page refuses to scroll down when the page extends (I.E., when I type stuff in the main content or side content divs), it remains static.. I need it to be pushed down when those divs move down. Does that make more sense? Please honestly let me know if I'm not making any sense... I'm just trying to get this to work. the end codes will obviously exist in my final validated product, but in the mean time I am just trying to figure out why its not doing what I want it to do.

The missing tags are needed and basic to any page. To get your page to display, you have to reduce the sizes of the divs. Your layout would require everyone to have a scroll bar or a width screen of 1248 not including padding or borders. This code works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Home</title><style type="text/css">	#mainwrapper {margin: 0 auto;}	.top {margin: 0 auto; width: 100%;background-color: pink;}	.left {float: left; width: 100px;background-color: red;}	.middlemain {margin: 0 auto;width:500px; background-color: green;}	.right {float: right;width: 100px;background-color: blue;}	.mainleft {float: left;width: 300px;background-color: orange;}	.mainright {float: right;width: 200px;background-color: purple;}	.mainbottom {margin: 0 auto;width: 500px;background-color: black;	clear:all;}	.white {color: white;}	</style></head><body><div id="mainwrapper">	<div class="top">		TOP BANNERS HERE	</div>	<div class="left">		LEFT NAV/AD HERE	</div>	<div class="right">		<span class="white">RIGHT NAV/AD HERE</span>	</div>	<div class="middlemain">		<div class="mainleft">			MAIN left HERE		</div>			<div class="mainright">			<span class="white">SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br /></span>		</div>		<div class="mainbottom">			<span class="white">BOTTOM STUFF HERE</span>		</div>	</div></div></body></html>

You will notice that the sides don't come down to the bottom. You need faux columns for that. You might want to move the "mainbottom" outside of main if you want that to be a footer (and remove the width for it).

[Morgan]

The missing tags are needed and basic to any page. To get your page to display, you have to reduce the sizes of the divs. Your layout would require everyone to have a scroll bar or a width screen of 1248 not including padding or borders. This code works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Home</title><style type="text/css">	#mainwrapper {margin: 0 auto;}	.top {margin: 0 auto; width: 100%;background-color: pink;}	.left {float: left; width: 100px;background-color: red;}	.middlemain {margin: 0 auto;width:500px; background-color: green;}	.right {float: right;width: 100px;background-color: blue;}	.mainleft {float: left;width: 300px;background-color: orange;}	.mainright {float: right;width: 200px;background-color: purple;}	.mainbottom {margin: 0 auto;width: 500px;background-color: black;	clear:all;}	.white {color: white;}	</style></head><body><div id="mainwrapper">	<div class="top">		TOP BANNERS HERE	</div>	<div class="left">		LEFT NAV/AD HERE	</div>	<div class="right">		<span class="white">RIGHT NAV/AD HERE</span>	</div>	<div class="middlemain">		<div class="mainleft">			MAIN left HERE		</div>			<div class="mainright">			<span class="white">SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br />			SIDE CONTENT HERE <br /></span>		</div>		<div class="mainbottom">			<span class="white">BOTTOM STUFF HERE</span>		</div>	</div></div></body></html>

You will notice that the sides don't come down to the bottom. You need faux columns for that. You might want to move the "mainbottom" outside of main if you want that to be a footer (and remove the width for it).

Is there any way to design the page so that it will automatically size to the full-size of the viewers settings? The entire concept behind this site was to have it take up the whole page.. I know width 100% and height 100% are bad for divs, thats how I used to do it with tables.. anything similar?

[Jerry62704]

Is there any way to design the page so that it will automatically size to the full-size of the viewers settings? The entire concept behind this site was to have it take up the whole page.. I know width 100% and height 100% are bad for divs, thats how I used to do it with tables.. anything similar?

A div by default will be 100%. If you float it, it has to have a specific width however. It can take that from an img or from the width property.I'm not sure how bad a 100% specific div is. I've never had a problem with it.Did you try the code I gave you? Did it work?

[jlhaslip]

Use percents for the div widths instead of fixed pixel widths. Don't forget to allow for some padding and margins along the width as you do you layout.http://www.jlhaslip.trap17.com/samples/tem...flex/index.html

[Morgan]

A div by default will be 100%. If you float it, it has to have a specific width however. It can take that from an img or from the width property.I'm not sure how bad a 100% specific div is. I've never had a problem with it.Did you try the code I gave you? Did it work?

Here is what happens when I use the code you gave me (same result I was having before):Here is what I am trying to do:

[Jerry62704]

Here is what happens when I use the code you gave me (same result I was having before):Here is what I am trying to do:

It looks quite different in IE6 with everything pushed down and around. Pretty much a mess. Are you really designing your pages for people that use 1200+ resolutions? Not very many do that you know.What you want is done with faux columns. A List Apart.

[Morgan]

I'm trying to design something that will look the same to anyone who visits, regardless of screen size... thats always my general goal. I just design in 1200x at first because that is my screen resolution so I like to see what it will look like as a finished product.Thanks for the link, I'll check it out :)and thanks for stickin with me all this time haha

[Morgan]

OK, soI did some re-designing of my own and finally decided that the faux column thing wasn't exactly what I had in mind, and I don't much enjoy static single image backgrounds w/ floating or absolute divs all around... just not my style (thanks for the tip tho, I may end up using that style sometime in a future design)I ultimately decided to go with set percentage widths, and pixel heights to determine final page size/layout..First, I'd kindly request confirmation of the page looking proper on a PC with a screen size that differs from my own:http://www.tmcustomcomputers.comsecondly, I'd like to know if anyone can isolate the NEW problem I seem to have come across, which I am absolutely stumped by.I ported over code from a multitude of my different sample / example pages to build the final working (or what I hope is working) product, however, for some reason the index page (http://www.tmcustomcomputers.com) seems to have extra line spacing EVERYWHERE in comparison to one of my older attempts in which I quite liked the line spacing. For the life of me, I cannot figure out what is causing all the content on the page to space double of what it was originally, as all I did was copy code from previous work (in which the spacing was correct) into my new page.Here (again) is the page that has extra or double spacing:http://www.tmcustomcomputers.comand here is the page without double spacing, the way it is supposed to (or rather, I want it to) look:http://www.tmcustomcomputers.com/index5.htmlI looked over everything piece by piece and I can't figure it out?Thanks so much!

[Jerry62704]

OK, soI did some re-designing of my own and finally decided that the faux column thing wasn't exactly what I had in mind, and I don't much enjoy static single image backgrounds w/ floating or absolute divs all around... just not my style (thanks for the tip tho, I may end up using that style sometime in a future design)I ultimately decided to go with set percentage widths, and pixel heights to determine final page size/layout..First, I'd kindly request confirmation of the page looking proper on a PC with a screen size that differs from my own:http://www.tmcustomcomputers.comsecondly, I'd like to know if anyone can isolate the NEW problem I seem to have come across, which I am absolutely stumped by.I ported over code from a multitude of my different sample / example pages to build the final working (or what I hope is working) product, however, for some reason the index page (http://www.tmcustomcomputers.com) seems to have extra line spacing EVERYWHERE in comparison to one of my older attempts in which I quite liked the line spacing. For the life of me, I cannot figure out what is causing all the content on the page to space double of what it was originally, as all I did was copy code from previous work (in which the spacing was correct) into my new page.Here (again) is the page that has extra or double spacing:http://www.tmcustomcomputers.comand here is the page without double spacing, the way it is supposed to (or rather, I want it to) look:http://www.tmcustomcomputers.com/index5.htmlI looked over everything piece by piece and I can't figure it out?Thanks so much!

Go to www.browsershots.org and you can get free image shots from a ton of different browsers.

[jlhaslip]

Very nice. An excellent example of using CSS for a page design. I encourage all members to have a look at the image-less design on this link. Nice subtle use of colours as background colours to dress up a page. A couple of things:1. can the "breaks" be done using borders instead of new div's? Less divitis.2. using "spans" instead of H1 and H2 tags will affect your site SEO. What you have looks great, but semantically, the use of span for the Heading is wrong.Overall, 9.75 / 10.*edit*looks good at 1280 and 1024 wide, but the right column of text runs over the footer at 800px wide.Might need to clear the floats in the footer.