Hello All, I am new to css and have managed to design my first webpage but am now finding out that many issues can occur as there are many browsers and different screen sizes out there. My website is not compatible size wise and I was possibly looking for some tips. I had heard that percentages were the way to go because they will allow the site to re-size according to the browser/screen size but when I tried this method it looked fine in ie 7 but was nearly a totally different site in firefox 2.0. How should percentages be used (if I should even use this method)? Are there any specific methods I should use? My website can be found at http://www.rooftrusssupply.com . I only updated the home page with all percentages on the images but still it looks a little awkward in places especially in firefox and the images look a little distorted. Any help would be great thanks so much. Trev
First to keep the edges from sticking out you'd have the whole page in a container with some margins (to keep everything from the edges). If you don't set a width, the container will just keep growing from side to side because divs by default try to be 100% width. Inside, the little box on the left would be floated left, so the red box can sit next to it-- also with no width set and the text inside in an <h1> with margins set to auto so it stays in the center. It too will grow as much as it can. I'd love to whip up a box-diagram (build it and let you look at it) but I got assigned banner-duty (have to make advertisements which is hard for me, I must be a commie or something) at work. When I find the link I will post deathshadow's 100% height model he made for someone here because as I remember, it was also a fluid width.
Damn, I don't have time to make a simple one... however, this link has many versions of sites and what you want (I think) is two column FLUID. http://blog.html.it/layoutgala/ You'll really have to work a bit with floats because of some of the images (they're a set width and height of course) and... you need to think how the site will look on a really really large screen. You'll have a lot of grey in the middle of the page. Be careful.